前陣子我寫了幾篇關於css屬性的理解和用法方面的文章,今天就不分享css屬性了,給大家分享一個我們在實際工作中用到比較多的一個效果——Tab選項卡效果。首先,我們先來看看Tab選項卡效果是什麼樣子,以QQ新聞為例,有以下效果:
當滑鼠滑動到相關的標題上時,標題對應的內容就會出現,這是Tab選項卡的滑動切換效果,Tab選項卡效果還包括延遲切換、自動切換效果。今天就和大家一起來學習下Tab選項卡的這三種效果。
三種效果都是基於以下的公共的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; }
滑動切換效果,顧名思義,就是當滑鼠滑過的時候,顯示標題下的內容。需要將目前標題的樣式置為選取狀態(增加標題選取的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
即可。
在瀏覽器中的效果如下所示:
#當滑鼠過相關標題的時候,標題中對應的內容則會顯示出來。
延遲切換效果,顧名思義,就是滑鼠滑動到標題上一定的時間後才顯示標題下相關的內容,熟悉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) } }
在瀏覽器中的效果如下:
#當滑鼠滑過標題的時候,總是間隔一定的時間後標題內容才出現。
自動切換效果,顧名思義,就是選項卡可以自動切換。在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; }
在瀏覽器中的效果如下:
##可以發現,選項卡可以間隔一定的時間自動切換。 6.寫在最後好了,今天給大家分享了Tab選項卡的三種切換效果,希望給大家起一個熱身作用,掌握了Tab選項卡的原理,其滑動切換、延遲切換、自動切換的效果較容易實現。 相關推薦:
以上是原生JS實作Tab選項卡各種效果的詳細內容。更多資訊請關注PHP中文網其他相關文章!