首页 > 前端
JQ实现Tab切换效果
来源:TP课堂 时间:2023-09-22 点击:836

Html:

<div class="nscience container">
    <div class="tab_nav">
      <div class="item item_current">Our RNA technologies</div>
      <div class="item">Our liposome technologies</div>
    </div>
    <div class="tab_content">
      <div class="item item_current">{$categoryData5.content|raw}</div>
      <div class="item">{$categoryData6.content|raw}</div>
    </div>
  </div>

Js:

<script type="text/javascript">

    // 点击按钮切换table

    $(".tab_nav .item").click(function () {

      // 获取点击的是第几个按钮



      var i = $(this).index();

      // 显示第i个table

      $(".tab_content .item").eq(i).show();

      // 隐藏其他的table

      $(".tab_content .item").eq(i).siblings(".tab_content .item").hide();

      // 把原来选中的取消选中状态

      $(".tab_nav .item").removeClass("item_current");

      // 切换点击的按钮的样式为选中状态

      $(this).addClass("item_current");

    });

  </script>