原生JS實作Tab選項卡各種效果
- 小云云原創
- 2018-02-23 14:01:592694瀏覽
前陣子我寫了幾篇關於css屬性的理解和用法方面的文章，今天就不分享css屬性了，給大家分享一個我們在實際工作中用到比較多的一個效果——Tab選項卡效果。首先，我們先來看看Tab選項卡效果是什麼樣子，以QQ新聞為例，有以下效果：
當滑鼠滑動到相關的標題上時，標題對應的內容就會出現，這是Tab選項卡的滑動切換效果，Tab選項卡效果還包括延遲切換、自動切換效果。今天就和大家一起來學習下Tab選項卡的這三種效果。
2.三種效果的公共代碼
三種效果都是基於以下的公共的html結構和css樣式：
在html程式碼中，使用兩個p，分別用於包含標題和內容，標題的個數和內容的數量需要相同。詳細的html程式碼和css程式碼如下：
html程式碼
<p id="notice" class="notice"> <p id="notice-title" class="notice-title"> <ul> <li class="select"><a href="#">公告</a></li> <li><a href="#">规则</a></li> <li><a href="#">论坛</a></li> <li><a href="#">安全</a></li> <li><a href="#">公益</a></li> </ul> </p> <p id="notice-content" class="notice-content"> <p class="mod" style="display: block"> <ul> <li> <a href="#">张勇：要玩快乐足球</a> </li> <li> <a href="#">阿里2000万驰援灾区</a> </li> <li> <a href="#">旅游宝让你边玩边赚钱</a> </li> <li> <a href="#">多行跟进阿里信用贷款</a> </li> </ul> </p> <p class="mod" style="display: none"> <ul> <li> <span> [ <a href="">通知</a> ] </span> <a href="#">“滥发”即将换新</a> </li> <li> <span> [ <a href="">通知</a> ] </span> <a href="#">比特币严管啦</a> </li> <li> <span> [ <a href="">通知</a> ] </span> <a href="#">禁发商品名录</a> </li> <li> <span> [ <a href="">通知</a> ] </span> <a href="#">商品熟悉限制</a> </li> </ul> </p> <p class="mod" style="display: none"> <ul> <li> <span> [ <a href="">聚焦</a> ] </span> <a href="#">金牌卖家再启航</a> </li> <li> <span> [ <a href="">功能</a> ] </span> <a href="#">橱窗规则升级啦</a> </li> <li> <span> [ <a href="">话题</a> ] </span> <a href="#">又爱又恨优惠券</a> </li> <li> <span> [ <a href="">工具</a> ] </span> <a href="#">购后送店铺红包</a> </li> </ul> </p> <p class="mod" style="display: none"> <ul> <li> <span> [ <a href="">要闻</a> ] </span> <a href="#">年轻干部要摒弃盲目求快的人生哲学</a> </li> <li> <span> [ <a href="">近来好</a> ] </span> <a href="#">都说实体店不行了，可便利店为啥越开越多？</a> </li> <li> <span> [ <a href="">冬奥会</a> ] </span> <a href="#">永远有杯咖啡留给您</a> </li> <li> <span> [ <a href="">总书记</a> ] </span> <a href="#">从高空视角看习总书记的春节足迹 奋进新时代</a> </li> </ul> </p> <p class="mod" style="display: none"> <ul> <li> <a href="#">走近无声课堂</a> </li> <li> <a href="#">淘宝之行大众评审赢公益</a> </li> <li> <a href="#">爱心品牌联合征集</a> </li> <li> <a href="#">名公益机构淘宝开店攻略</a> </li> </ul> </p> </p> </p>
css程式碼
*{
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
box-sizing: border-box;
}
.notice{
width: 302px;
height: 100px;
margin: 10px;
border: 1px solid #eee;
overflow: hidden;
}
.notice-title{
height: 26px;
background: #f7f7f7;
}
.notice-title li{
float: left;
width: 60px;
line-height: 26px;
text-align: center;
overflow: hidden;
background: #fff;
border-bottom: 1px solid #eee;
background: #f7f7f7;
}
.notice li a:link,
.notice li a:visited{
text-decoration: none;
color: #000;
}
.notice li a:hover{
color: #f90;
}
.notice-title li.select{
background: #fff;
border-bottom-color: #fff;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
font-weight: bold;
}
.notice-title li:first-child.select{
border-left: none;
}
.notice-title li:last-child.select{
border-right: none;
}
.notice-content .mod{
padding: 12px 5px;
}
.notice-content .mod ul{
width: 300px;
font-size: 0;
}
.notice-content .mod ul li{
display: inline-block;
width: 145px;
height: 25px;
line-height: 25px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
3.滑過切換效果原理分析
滑動切換效果，顧名思義，就是當滑鼠滑過的時候，顯示標題下的內容。需要將目前標題的樣式置為選取狀態（增加標題選取的css樣式，本例中是增加select樣式類別），同時將該標題下的內容置為顯示，即設定樣式display:block，而其他標題下的內容設定為隱藏，即設定樣式display:none。詳細的javascript程式碼如下：
function $(id) {
return typeof id==='string'? document.getElementById(id):id;
}
//获取鼠标滑过或点击的标签和要切换内容的元素
var titles = $('notice-title').getElementsByTagName('li'),
ps = $('notice-content').getElementsByTagName('p');
if(titles.length != ps.length){
return;
}
// 遍历titles下的所有li
for(var i = 0; i < titles.length; i++) {
// 添加索引
titles[i].id = i;
titles[i].onmouseover = function () {
//清除所有title上的class，将所有的p设置为隐藏
for(var j=0; j<titles.length; j++) {
titles[j].className = '';
ps[j].style.display = 'none';
}
//设置当前li为高亮显示
this.className = 'select';
ps[this.id].style.display = 'block';
}
}如果需要實作點擊切換的效果，只需要將onmouseover修改為 onclick即可。
在瀏覽器中的效果如下所示：
#當滑鼠過相關標題的時候，標題中對應的內容則會顯示出來。
4.延遲切換效果原理分析
延遲切換效果，顧名思義，就是滑鼠滑動到標題上一定的時間後才顯示標題下相關的內容，熟悉javascript的同學知道，我們可以使用setTimeout函數來達到延遲一定的時間，然後再將相關的標題和內容修改為顯示與隱藏。其javascript程式碼與滑動切換效果相差不大，需要我們修改的是先判斷定時器timer是否存在，如果存在，需要清除計時器timer，否則就會出現多個定時器，導致切換效果紊亂，然後將修改標題樣式和標題內容的程式碼放到setTimout函數中。
var timer = null;
var list = $('notice-title').getElementsByTagName('li'),
ps = $('notice-content').getElementsByTagName('p');
if(list.length != ps.length){
return;
}
for(var i = 0; i < list.length; i++) {
list[i].id = i;
list[i].onmouseover = function () {
var self = this;
//如果存在准备执行的定时器，立刻清除，只有当前停留时间大于500ms时才开始执行
if(timer) {
clearTimeout(timer);
timer = null;
}
//延迟半秒执行
timer = setTimeout(function () {
for(var j = 0; j < list.length; j++) {
list[j].className = '';
ps[j].style.display = 'none';
}
list[self.id].className = 'select';
ps[self.id].style.display = 'block';
}, 500)
}
}在瀏覽器中的效果如下：
#當滑鼠滑過標題的時候，總是間隔一定的時間後標題內容才出現。
5.自動切換效果原理分析
自動切換效果，顧名思義，就是選項卡可以自動切換。在javascript中，我們可以使用setInterval來實現這種效果。具體步驟如下：
預設第一個標題處於選取狀態，第一個標題下的內容顯示，同時設定每個標題id;
判斷定時器是否存在，如果存在，則清除定時器；
#利用
setInterval函數，每隔一定的時間(本例中設定的時間是2s)執行函數autoPlay，在autoPlay函數中，改變顯示標題的下標index，如果下標index的值大於等於標題的個數，則顯示下標index的值置為0;將標題的下標等於顯示的下標
index值增加selected類，同時將內容的下標等於顯示下標index值設定為顯示(display:block)，其餘的標題內容修改為隱藏(display:none);
//当前高亮显示的页签索引
var index = 0;
var timer = null;
//获取所有的页签和要切换的内容
var list = $('notice-title').getElementsByTagName('li'),
ps = $('notice-content').getElementsByTagName('p');
//遍历每一个页签并且给他们绑定事件
for(var i = 0; i < list.length; i++) {
list[i].id = i;
}
//添加定时器前做一次清除，避免多个定时器导致页面卡顿
if(timer){
clearInterval(timer);
timer = null;
}
//添加定时器，改变当前高亮的索引
timer = setInterval(autoPlay, 2000);
function autoPlay() {
index++;
if(index >= list.length) {
index = 0;
}
changeOption(index);
}
function changeOption(curIndex) {
// console.log(curIndex);
for(var j = 0; j < list.length; j++) {
list[j].className = '';
ps[j].style.display = 'none';
}
//高亮显示当前页签
list[curIndex].className = 'select';
ps[curIndex].style.display = 'block';
index = curIndex;
}
在瀏覽器中的效果如下：
以上是原生JS實作Tab選項卡各種效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn