天天插天天操天天干,特黄aaaaa日本大片免费看,亚洲视频在线视频

發布日期：2018-02-23 來源：企業800網作者：新格網瀏覽次數：571 【去百度看看】

核心提示：前一段時間我寫了幾篇關于css屬性的理解和用法方面的文章，今天就不分享css屬性了，給大家分享一個我們在實際工作中用到比較多的一個效果——Tab選項卡效果。首先，我們先來看看Tab選項卡效果是什么樣子，以QQ新聞為例，有如下效果：

前一段時間我寫了幾篇關于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;
}

在瀏覽器中的效果如下：

可以發現，選項卡可以間隔一定的時間自動切換。

6.寫在最后

好了，今天給大家分享了Tab選項卡的三種切換效果，希望給大家起一個熱身作用，掌握了Tab選項卡的原理，其滑動切換、延遲切換、自動切換的效果比較容易實現。

久久久久在线观看_又色又爽又黄的免费视频播放_一区中文字幕_日韩电影在线播放

原生JS實現Tab選項卡各種效果

2.三種效果的公共代碼

3.滑過切換效果原理分析

4.延遲切換效果原理分析

5.自動切換效果原理分析

6.寫在最后