cari

Rumah  >  Artikel  >  hujung hadapan web  >  jQuery melaksanakan demonstrasi ringkas effect_jquery penukaran Tab

jQuery melaksanakan demonstrasi ringkas effect_jquery penukaran Tab

WBOY
WBOYasal
2016-05-16 15:30:181358semak imbas

Contoh dalam artikel ini ialah demonstrasi mudah kesan penukaran Tab jQuery Ia sepenuhnya pemikiran dan proses pelaksanaan saya sendiri, dan saya berkongsi dengan anda untuk rujukan anda. Butirannya adalah seperti berikut:

Pada mulanya bingkai kod Html saya kelihatan seperti ini: 

<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>

Kemudian ditukar kepada yang berikut: 

<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>

Sebab saya menukar kepada ini adalah kerana saya berpendapat dl dt dd digunakan kurang daripada div ul li dalam reka letak halaman, yang boleh mencapai pengasingan yang lebih baik. Jika kita menggunakan js untuk mengendalikan objek dl dt dd, ia akan memberi kesan yang kurang pada elemen lain pada halaman Selain itu, tidak perlu menyesuaikan atribut kotak data dalam teg li, yang lebih sesuai dengan halaman piawaian penulisan. Dan rasa keseluruhan struktur ini lebih baik daripada yang di atas.
Kod pelaksanaan pemalam adalah seperti berikut: 

(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);

Sebab mengapa ia dikatakan ringan adalah kerana jumlah kod adalah sangat kecil dan sangat mudah. Komen tambah, saya percaya semua orang boleh faham.

Model dalam tetapan digunakan untuk mengawal kaedah pensuisan:

  • Apabila "klik", klik untuk menukar
  • Apabila ia "mengalih tetikus", tetikus meluncur masuk untuk bertukar.

Pada mulanya saya ingin menggunakan hover untuk melaksanakan penukaran slaid masuk tetikus, tetapi saya mendapati bahawa hover tidak menyokong pengikatan ikatan. Oleh kerana hover ialah hasil daripada jquery yang merangkum peristiwa alih tetikus, ia bukan peristiwa yang sahih dan oleh itu tidak boleh terikat.
Berikut ialah 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>

Rendering adalah seperti berikut:

Saya harap artikel ini akan membantu semua orang yang mempelajari pengaturcaraan jquery.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Analisis menyeluruh tentang cara menggunakan borang Bootstrap (butang borang)_kemahiran javascriptArtikel seterusnya：Analisis menyeluruh tentang cara menggunakan borang Bootstrap (butang borang)_kemahiran javascript

Artikel berkaitan

Lihat lagi