jQuery實(shí)現(xiàn)Tab選項(xiàng)卡切換效果簡(jiǎn)單演示

更新時(shí)間：2015年11月23日 16:44:06 作者：similar

這篇文章向大家推薦了一個(gè)jQuery實(shí)現(xiàn)Tab選項(xiàng)卡切換效果的簡(jiǎn)單演示，感興趣的小伙伴們可以參考一下

本文實(shí)例針對(duì)jQuery實(shí)現(xiàn)Tab選項(xiàng)卡切換效果進(jìn)行了簡(jiǎn)單演示，完全是自己的思考實(shí)現(xiàn)過(guò)程，分享給大家供大家參考。具體如下：

起初我Html代碼架子是這樣的：

<div class="tabs">  
  <ul>
   <li class="acss" data-box="#panel-1">標(biāo)簽1</li>
   <li class="bcss" data-box="#panel-2">標(biāo)簽2</li>
   <li class="bcss" data-box="#panel-3">標(biāo)簽3</li>
  </ul>
  <div id="panel-1">內(nèi)容111111</div>
  <div id="panel-2" style="display:none;">內(nèi)容222222</div>
  <div id="panel-3" style="display:none;">內(nèi)容333333</div>
</div>

后來(lái)?yè)Q成了下面這個(gè)：

<dl class="tabs">
  <dt>
   <a class="acss" href="#panel-1">標(biāo)簽1</a>
   <a class="bcss" href="#panel-2">標(biāo)簽2</a>
   <a class="bcss" href="#panel-3">標(biāo)簽3</a>
  </dt>
  <dd id="panel-1">內(nèi)容1</dd>
  <dd id="panel-2" style="display:none;">內(nèi)容2</dd>
  <dd id="panel-3" style="display:none;">內(nèi)容3</dd>
 </dl>

之所以換成這個(gè)，是因?yàn)槲矣X(jué)得 dl dt dd 在頁(yè)面布局中用的比 div ul li 要少，這樣可以做到更好的隔離性。我們用js操作dl dt dd 對(duì)象，就會(huì)更少的影響到頁(yè)面內(nèi)其它元素，還有就是不用在li標(biāo)簽中自定義data-box屬性，更符合頁(yè)面書(shū)寫(xiě)標(biāo)準(zhǔn)。而且這個(gè)結(jié)構(gòu)的整體感覺(jué)也比上面那個(gè)好。
插件的實(shí)現(xiàn)代碼如下：

(function ($) {
   $.fn.Tabs = function (options) {
    //默認(rèn)參數(shù)設(shè)置
    var settings = {
     beforeCss: "bcss", //激活前樣式名
     afterCss: "acss", //激活后樣式名
     model: "mouseover" //切換方式("mouseover"或者"click")
    };

    //不為空，則合并參數(shù)
    if (options)
     $.extend(settings, options);

    //獲取a標(biāo)簽集合
    var arr_a = $("> dt > a", this);

    //給a標(biāo)簽分別綁定事件
    arr_a.each(function () {
     $(this).bind(settings.model, function (event) {
　　　　　　　　　　　　　　//去除a標(biāo)簽的錨點(diǎn)跳轉(zhuǎn)
    　　　　 event.preventDefault();
      //樣式控制
      $(this).removeClass().addClass(settings.afterCss)
      .siblings("a").removeClass().addClass(settings.beforeCss);
      //隱藏與顯示控制
      var dd_id = $(this).attr("href");
      $(dd_id).show().siblings("dd").hide();
     });
    });

    //遵循鏈?zhǔn)皆瓌t
    return this.each(function () { });
   };
})(jQuery);

之所以說(shuō)是輕量級(jí)，是因?yàn)榇a量真的很少，也很簡(jiǎn)單。加了注釋相信大家都可以看懂。

其中settings中的model是用來(lái)控制切換方式的：

當(dāng)為"click"時(shí)，點(diǎn)擊實(shí)現(xiàn)切換；
當(dāng)為"mouseover"時(shí)，鼠標(biāo)滑入實(shí)現(xiàn)切換。

開(kāi)始時(shí)是想用hover來(lái)實(shí)現(xiàn)鼠標(biāo)滑入切換的，結(jié)果發(fā)現(xiàn)，hover不支持bind綁定。因?yàn)閔over是jquery通過(guò)封裝 mouseover事件的產(chǎn)物，它并不是一個(gè)正宗的事件，因此無(wú)法綁定。
下面給出個(gè)DEMO：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title></title>
 <style type="text/css">
  *
  {
   margin: 0;
   padding: 0;
  }    
  .tabs
  {
   width: 504px;
   margin: 50px auto;
   }
   
   .acss,.bcss
   {   
   text-decoration:none;
   line-height: 35px;
   font-size: 14px;
   padding:8px 15px;    
   }
   
   .bcss
   {
    background-color: #D4D4D4;
    border-bottom:1px solid white;
    }
   .acss
   {
    background-color: orange;
    border-bottom:1px solid orange;
    }   
   .tabs dd
   {
   width: 500px;
   height: 300px;
   border: 1px solid orange;
   text-align: center;
   line-height: 300px;
   }
 </style>
</head>
<body>
 
 <dl class="tabs" id="tabs1">
  <dt>
   <a class="acss" href="#panel-1">標(biāo)簽1</a>
   <a class="bcss" href="#panel-2">標(biāo)簽2</a>
   <a class="bcss" href="#panel-3">標(biāo)簽3</a>
  </dt>
  <dd id="panel-1"><h1>鼠標(biāo)滑入切換</h1></dd>
  <dd id="panel-2" style="display:none;">內(nèi)容2</dd>
  <dd id="panel-3" style="display:none;">內(nèi)容3</dd>
 </dl> 
 <dl class="tabs" id="tabs2">
  <dt>
   <a class="acss" href="#panel-4">標(biāo)簽1</a><!--默認(rèn)第一個(gè)激活-->
   <a class="bcss" href="#panel-5">標(biāo)簽2</a>
   <a class="bcss" href="#panel-6">標(biāo)簽3</a>
  </dt>
  <dd id="panel-4"><h1>鼠標(biāo)點(diǎn)擊切換</h1></dd><!--默認(rèn)第一個(gè)顯示-->
  <dd id="panel-5" style="display:none;">內(nèi)容2</dd>
  <dd id="panel-6" style="display:none;">內(nèi)容3</dd>
 </dl>

 <script src="../js/jquery-1.4.1.min.js" type="text/javascript"></script>
 <script src="../js/jquery.similar.Tabs.js" type="text/javascript"></script>
 <script type="text/javascript">
  $("#tabs1").Tabs(); //默認(rèn)鼠標(biāo)滑入切換
  $("#tabs2").Tabs({model:"click"}); //設(shè)置為點(diǎn)擊切換
 </script>
</body>
</html>

效果圖如下：