지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > js/jQuery는 단순히 탭 기능을 구현합니다.

js/jQuery는 단순히 탭 기능을 구현합니다.

高洛峰
풀어 주다： 2017-02-04 14:38:28
원래의
932명이 탐색했습니다.

첫 번째 방법은 다음과 같이 네이티브 js 코드를 사용하는 것입니다. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>简单选项卡</title>
    <style type="text/css">
    body,ul,li{margin:0;padding:0;}
    body{font:12px/1.5 Tahoma;}
    #outer{width:450px;margin:10px auto;}
    #tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;}
    #tab li{float:left;color:#fff;height:30px;cursor:pointer;line-height:30px;list-style-type:none;padding:0 20px;}
    #tab li.current{color:#000;background:#ccc;}
    #content{border:1px solid #000;border-top-width:0;}
    #content ul{line-height:25px;display:none;margin:0 30px;padding:10px 0;}
    </style>
    <script type="text/javascript">
      window.onload = function ()
      {
          var oLi = document.getElementById("tab").getElementsByTagName("li");
          var oUl = document.getElementById("content").getElementsByTagName("ul");
          for(var i = 0; i < oLi.length; i++)
          {
              oLi[i].index = i;
              oLi[i].onmouseover = function (){
                  for(var n = 0;n < oLi.length;n++)
                  {
                      oLi[n].className = "";
                      this.className = "current";
                  }
                      for(var n = 0;n <oUl.length;n++)
                      {
                          oUl[n].style.display = "none";
                          oUl[this.index].style.display="block";
                      }
              }
          }
      }
    </script>
    </head>
<body>
<div id="outer">
<ul id="tab">
    <li class="current">科技</li>
    <li>旅游</li>
    <li>娱乐</li>
</ul>
<div id="content">
    <ul style="display:block;">
        <li>宏碁R7双转轴变形本评测：触摸板设计过于另类(图)</li>
        <li> 超薄加防水 索尼Xperia Tablet Z平板电脑评测</li>
        <li>诺基亚Lumia 925评测 最好的WP8智能手机</li>
        <li> 联想IdeaPad S405评测 性能主流续航待提升</li>
        <li>小辣椒M2智能手机评测: 再不换壳我们就该老了</li>
        <li>联想K900内部构造 看国产神器多少国产货(组图)</li>
        <li>联想K900内部构造 看国产神器多少国产货(组图)</li>
        <li>网页换肤效果</li>
        <li>联想K900内部构造 看国产神器多少国产货(组图)</li>
    </ul>
    <ul>
        <li>爱上西雅图，美国全景游精选推荐 </li>
        <li>爱上西雅图，美国全景游精选推荐 </li>
        <li>爱上西雅图，美国全景游精选推荐 </li>
        <li>爱上西雅图，美国全景游精选推荐 </li>
        <li>爱上西雅图，美国全景游精选推荐 </li>
        <li>爱上西雅图，美国全景游精选推荐 </li>
        <li>爱上西雅图，美国全景游精选推荐 </li>
        <li>爱上西雅图，美国全景游精选推荐 </li>
        <li>爱上西雅图，美国全景游精选推荐 </li>
        <li>爱上西雅图，美国全景游精选推荐 </li>
        <li>爱上西雅图，美国全景游精选推荐 </li>
        <li>爱上西雅图，美国全景游精选推荐 </li>
        <li>爱上西雅图，美国全景游精选推荐 </li>
    </ul>
    <ul>
        <li>李安宣布辞拍美剧《暴君》：需要休息</li>
        <li>李安宣布辞拍美剧《暴君》：需要休息</li>
        <li>李安宣布辞拍美剧《暴君》：需要休息</li>
        <li>李安宣布辞拍美剧《暴君》：需要休息</li>
        <li>李安宣布辞拍美剧《暴君》：需要休息</li>
        <li>李安宣布辞拍美剧《暴君》：需要休息</li>
        <li>李安宣布辞拍美剧《暴君》：需要休息</li>
        <li>李安宣布辞拍美剧《暴君》：需要休息</li>
        <li>李安宣布辞拍美剧《暴君》：需要休息</li>
        <li>李安宣布辞拍美剧《暴君》：需要休息</li>
        <li>李安宣布辞拍美剧《暴君》：需要休息</li>
    </ul>
</div>
</div>
</body>
</html>
로그인 후 복사

두 번째 방법은 jQuery를 사용하는 것으로, 첫 번째 방법보다 코드가 간단합니다. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>简单选项卡</title>
    <style type="text/css">
    body,ul,li{margin:0;padding:0;}
    body{font:12px/1.5 Tahoma;}
    #outer{width:450px;margin:10px auto;}
    #tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;}
    #tab li{float:left;color:#fff;height:30px;cursor:pointer;line-height:30px;list-style-type:none;padding:0 20px;}
    #tab li.current{color:#000;background:#ccc;}
    #content{border:1px solid #000;border-top-width:0;}
    #content ul{line-height:25px;display:none;margin:0 30px;padding:10px 0;}
    </style>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">

    $(function(){
            var timeid;
          $("#tab").find("li").each(function(index){
              var sLi=$(this);
              sLi.mouseenter(function(){
                  timeid= setTimeout(function(){
                      sLi.addClass("current").siblings().removeClass("current");
                      sLi.parent().next().find("ul:eq(" + index +")").show().siblings().hide() ;
                 },300);
              }).mouseleave(function(){
                     clearTimeout(timeid);
                      })
          })
        })
    </script>
    </head>
<body>
<div id="outer">
<ul id="tab">
    <li class="current">科技</li>
    <li>旅游</li>
    <li>娱乐</li>
</ul>
<div id="content">
    <ul style="display:block;">
        <li>宏碁R7双转轴变形本评测：触摸板设计过于另类(图)</li>
        <li> 超薄加防水 索尼Xperia Tablet Z平板电脑评测</li>
        <li>诺基亚Lumia 925评测 最好的WP8智能手机</li>
        <li> 联想IdeaPad S405评测 性能主流续航待提升</li>
        <li>小辣椒M2智能手机评测: 再不换壳我们就该老了</li>
        <li>联想K900内部构造 看国产神器多少国产货(组图)</li>
        <li>联想K900内部构造 看国产神器多少国产货(组图)</li>
        <li>网页换肤效果</li>
        <li>联想K900内部构造 看国产神器多少国产货(组图)</li>
    </ul>
    <ul>
        <li>爱上西雅图，美国全景游精选推荐 </li>
        <li>爱上西雅图，美国全景游精选推荐 </li>
        <li>爱上西雅图，美国全景游精选推荐 </li>
        <li>爱上西雅图，美国全景游精选推荐 </li>
        <li>爱上西雅图，美国全景游精选推荐 </li>
        <li>爱上西雅图，美国全景游精选推荐 </li>
        <li>爱上西雅图，美国全景游精选推荐 </li>
        <li>爱上西雅图，美国全景游精选推荐 </li>
        <li>爱上西雅图，美国全景游精选推荐 </li>
        <li>爱上西雅图，美国全景游精选推荐 </li>
        <li>爱上西雅图，美国全景游精选推荐 </li>
        <li>爱上西雅图，美国全景游精选推荐 </li>
        <li>爱上西雅图，美国全景游精选推荐 </li>
    </ul>
    <ul>
        <li>李安宣布辞拍美剧《暴君》：需要休息</li>
        <li>李安宣布辞拍美剧《暴君》：需要休息</li>
        <li>李安宣布辞拍美剧《暴君》：需要休息</li>
        <li>李安宣布辞拍美剧《暴君》：需要休息</li>
        <li>李安宣布辞拍美剧《暴君》：需要休息</li>
        <li>李安宣布辞拍美剧《暴君》：需要休息</li>
        <li>李安宣布辞拍美剧《暴君》：需要休息</li>
        <li>李安宣布辞拍美剧《暴君》：需要休息</li>
        <li>李安宣布辞拍美剧《暴君》：需要休息</li>
        <li>李安宣布辞拍美剧《暴君》：需要休息</li>
        <li>李安宣布辞拍美剧《暴君》：需要休息</li>
    </ul>
</div>
</div>
</body>
</html>
로그인 후 복사

첫 번째 방법은 네이티브를 사용하려면 js는 다른 사람의 방법을 기반으로 하고, 두 번째는 첫 번째 방법을 기반으로 제가 작성한 것입니다. . .

탭 기능만 구현한 js/jQuery 관련 글은 PHP 중국어 홈페이지를 참고해주세요!
관련 라벨：
jQuery 选项卡
원천：php.cn
이전 기사：js 탭 구현 방법 다음 기사：jsp js 지정된 영역으로 마우스를 이동하여 탭을 표시하고 예제를 종료할 때 탭을 숨깁니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 웹 애플리케이션을 개발 중입니다. 웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 저는 semantic versioning을 사용하고 있고 이미 ...
에서 2024-04-06 19:13:16
0
2
476
Reactjs에서 여러 확인란을 선택하는 방법 여러 개의 확인란을 선택하고 싶지만 그렇게 할 수 없는 옵션 목록이 있습니다. 이 코드에 어떤 문제가 있습니까? 샌드박스 URL
에서 2024-04-06 18:55:21
0
1
396
window.open() 및 data: 구성표를 사용하여 계산 문서 열기 새 브라우저 탭에서 열려는 계산된 HTML 문서를 생성하는 브라우저에서 실행되는 웹 페이지가 있습니다. 간단하고 지저분한 방법은 다음과 같이 하는 것입니다: co...
에서 2024-04-06 15:06:34
0
1
378
Vue3 웹 구성요소 프로덕션 빌드 문제 해결 vue2web 구성요소를 vue3으로 마이그레이션하려고 하는데 프로덕션용 빌드를 생성할 때 문제가 발생합니다. --targetwc와 함께 vue-cli를 사용하고...
에서 2024-04-06 12:43:37
0
1
473
vue에서 경로 소품을 설정하는 방법이 있나요? this.$router.push({name:"AdminNotifications",params:{tab:"requests"},}...
에서 2024-04-06 11:35:59
0
1
456
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿