Laksanakan kesan penukaran tab paling mudah berdasarkan jquery

Laksanakan kesan penukaran tab paling mudah berdasarkan jquery_jquery

WBOY

Lepaskan： 2016-05-16 15:01:41

asal

1723 orang telah melayarinya

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>

Salin selepas log masuk

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