집 >웹 프론트엔드 >JS 튜토리얼 >jquery_jquery를 기반으로 가장 간단한 탭 전환 효과 구현

jquery_jquery를 기반으로 가장 간단한 탭 전환 효과 구현

WBOY원래의: 2016-05-16 15:01:411785검색

이 기능은 오늘날의 웹사이트에서 흔히 사용되는 기능으로 일부 콘텐츠를 탭 형태로 분류하는 기능입니다. , 아래의 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>

위 내용은 이 글의 전체 내용입니다. 모든 분들이 탭 전환 기술을 익히는 데 도움이 되길 바랍니다.

성명：

이전 기사：JavaScript Backbone.js Framework 시작하기 학습 가이드_기본 지식다음 기사：JavaScript Backbone.js Framework 시작하기 학습 가이드_기본 지식

jquery_jquery를 기반으로 가장 간단한 탭 전환 효과 구현

관련 기사