jQuery는 탭 옵션 전환의 가장 간단한 구현입니다.

이번에는 jQuery를 사용한 가장 간단한 탭 옵션 전환 구현을 소개하겠습니다. jQuery에서 탭 옵션 전환을 구현하는 데 필요한 Notes는 무엇입니까?

Rendering:

Code:

nbsp;html>


<meta>
<script></script>
<title>简单的tab效果</title>
<style>
* {
  padding: 0px;
  margin:0px
}
body {
  text-align: center
}
.wrap ul {
  overflow: hidden
}
.wrap li {
  float: left;
  list-style: none;
  margin-right: 10px;
  cursor: pointer;
  padding: 2px 5px
}
.link {
  cursor: pointer;
  color: #F00
}
.wrap {
  width: 200px;
  margin: 50px auto
}
.wrap, .ellipsis {
  font-size: 12px;
  width: 200px;
}
.tab_p p {
  display: none;
  padding: 10px;
}
.tab_p {
  text-align: left;
  border: 1px #CCC solid;
  height: 200px;
  clear: both
}
.cur {
  background: #060;
  color: #FFF
}
#setTab_2{
  margin-top: 20px;
}
</style>
<script>
$(document).ready(function() {
  //tab
    $("#setTab").setTab();
    $("#setTab_2").setTab();
});
 
/*插件代码*/
(function ($) {
  $.fn.setTab = function () {
    var getTab=$(this),//this指向调用函数的ID
      panels = getTab.children("p.tab_p").children("p"),
      tabs = getTab.find("li");
 
    return this.each(function(){
      $(tabs).click(function(e) {
        var index = $.inArray(this, $(this).parent().find("li"));//this指向li
        if (panels.eq(index)[0]) {
          $(tabs).removeClass("cur");
          $(this).addClass("cur");
          panels.css("display", "none").eq(index).css("display", "block");
        }
      });
       
    });
 }
})(jQuery);
 
 
</script>


<p>
 </p>

  
• 国事
  
• 军情
  
• 图片
 

 

  

国事

  

军情

  

图片

 

 

  
• 国事
  
• 军情
  
• 图片
 

 

  

国事

  

军情

  

图片

 

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요. !

추천 자료:

jquery는 요소 드래그 정렬을 구현합니다(코드 포함)

jQuery+CSS는 레이블 열 전환을 구현합니다(코드 포함)

위 내용은 jQuery는 탭 옵션 전환의 가장 간단한 구현입니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!