jQuery實現Tab選項卡切換效果簡單演示

2019-11-20 11:11:26

字體：大中小

來源：轉載

供稿：網友

本文實例針對jQuery實現Tab選項卡切換效果進行了簡單演示，完全是自己的思考實現過程，分享給大家供大家參考。具體如下：

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

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

后來換成了下面這個：

<dl class="tabs">  <dt>   <a class="acss" href="#panel-1">標簽1</a>   <a class="bcss" href="#panel-2">標簽2</a>   <a class="bcss" href="#panel-3">標簽3</a>  </dt>  <dd id="panel-1">內容1</dd>  <dd id="panel-2" style="display:none;">內容2</dd>  <dd id="panel-3" style="display:none;">內容3</dd> </dl>

之所以換成這個，是因為我覺得 dl dt dd 在頁面布局中用的比 div ul li 要少，這樣可以做到更好的隔離性。我們用js操作dl dt dd 對象，就會更少的影響到頁面內其它元素，還有就是不用在li標簽中自定義data-box屬性，更符合頁面書寫標準。而且這個結構的整體感覺也比上面那個好。
插件的實現代碼如下：

(function ($) {   $.fn.Tabs = function (options) {    //默認參數設置    var settings = {     beforeCss: "bcss", //激活前樣式名     afterCss: "acss", //激活后樣式名     model: "mouseover" //切換方式("mouseover"或者"click")    };    //不為空，則合并參數    if (options)     $.extend(settings, options);    //獲取a標簽集合    var arr_a = $("> dt > a", this);    //給a標簽分別綁定事件    arr_a.each(function () {     $(this).bind(settings.model, function (event) {　　　　　　　　　　　　　　//去除a標簽的錨點跳轉    　　　　 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();     });    });    //遵循鏈式原則    return this.each(function () { });   };})(jQuery);

之所以說是輕量級，是因為代碼量真的很少，也很簡單。加了注釋相信大家都可以看懂。

其中settings中的model是用來控制切換方式的：

當為"click"時，點擊實現切換；
當為"mouseover"時，鼠標滑入實現切換。

開始時是想用hover來實現鼠標滑入切換的，結果發現，hover不支持bind綁定。因為hover是jquery通過封裝 mouseover事件的產物，它并不是一個正宗的事件，因此無法綁定。
下面給出個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">標簽1</a>   <a class="bcss" href="#panel-2">標簽2</a>   <a class="bcss" href="#panel-3">標簽3</a>  </dt>  <dd id="panel-1"><h1>鼠標滑入切換</h1></dd>  <dd id="panel-2" style="display:none;">內容2</dd>  <dd id="panel-3" style="display:none;">內容3</dd> </dl>  <dl class="tabs" id="tabs2">  <dt>   <a class="acss" href="#panel-4">標簽1</a><!--默認第一個激活-->   <a class="bcss" href="#panel-5">標簽2</a>   <a class="bcss" href="#panel-6">標簽3</a>  </dt>  <dd id="panel-4"><h1>鼠標點擊切換</h1></dd><!--默認第一個顯示-->  <dd id="panel-5" style="display:none;">內容2</dd>  <dd id="panel-6" style="display:none;">內容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(); //默認鼠標滑入切換  $("#tabs2").Tabs({model:"click"}); //設置為點擊切換 </script></body></html>

效果圖如下：