jquery_jquery に基づいた最も単純なタブ切り替え効果を実装します。-jsチュートリアル-php.cn

jquery_jquery に基づいた最も単純なタブ切り替え効果を実装します。

WBOY

リリース： 2016-05-16 15:01:41

オリジナル

1724 人が閲覧しました

この機能は今日の Web サイトで一般的に使用されており、一部のコンテンツをタブの形式で分類します。、以下のTmallモールなど。

次のソースコードは、Tmall によって作成されたタブをモデルとしています。実装の効果は次のとおりです。

主に、クリック時に対応するセクションをトリガーするクリックイベントを使用し、クリックイベント内のコンテンツ表示ボックス（タブボックス）内の対応する項目を表示または非表示にします。

同時に、ホバーを使用してマウスオーバー効果を追加します。

コード:

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

ログイン後にコピー

以上がこの記事の全内容です。皆さんがタブ切り替えのスキルを習得するのに役立つことを願っています。