cari

Rumah >hujung hadapan web >tutorial js >Laksanakan kesan penukaran tab paling mudah berdasarkan jquery_jquery

Laksanakan kesan penukaran tab paling mudah berdasarkan jquery_jquery

WBOY
WBOYasal
2016-05-16 15:01:411806semak imbas

Fungsi ini biasanya digunakan dalam laman web hari ini, iaitu untuk mengklasifikasikan beberapa kandungan dalam bentuk tab. , seperti pusat beli-belah Tmall di bawah.

Kod sumber berikut dimodelkan selepas tab yang ditulis oleh Tmall Kesan pelaksanaan adalah seperti berikut.

Terutamanya menggunakan acara klik yang mencetuskan bahagian yang sepadan apabila kami mengkliknya, dan kemudian memaparkan dan menyembunyikan item yang sepadan dalam kotak paparan kandungan (kotak tab) dalam acara klik.

Pada masa yang sama, tuding digunakan untuk menambah kesan tetikus.

Kod: 

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <link href="css/style1.css" rel="stylesheet" type="text/css" />
  <script src="jquery-1.3.2.min.js"></script>
  <title></title>
  <script>
    $(function () {
      var $div_li = $("div.tab_menu ul li");
      $div_li.click(function () {       //定义了tan_menu对应的单击事件，也就是类别的单击事件。
        $(this).addClass("selected")
        .siblings().removeClass("selected");
        var index = $div_li.index(this);
        $("div.tab_box>div").eq(index).show()
        .siblings().hide();
      }).hover(function () {         //定义了鼠标滑过特效
        $(this).addClass("hover");
      }, function () {
        $(this).removeClass("hover");
      });
    });

  </script>
</head>
<body>
  <div class="tab">
    <div class="tab_menu">
      <ul>
        <li class="selected">时事</li>
        <li>体育</li>
        <li>娱乐</li>
      </ul>
    </div>
    <div class="tab_box">
      <div>时事</div>
      <div class="hide">体育</div>
      <div class="hide">娱乐</div>
    </div>
  </div>
</body>
</html>

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang untuk menguasai kemahiran menukar tab.

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：Panduan Belajar Bermula untuk Rangka Kerja_Pengetahuan Asas Backbone.js JavaScriptArtikel seterusnya：Panduan Belajar Bermula untuk Rangka Kerja_Pengetahuan Asas Backbone.js JavaScript

Artikel berkaitan

Lihat lagi