jQuery tab選項卡效果程式碼例項

admin發表於2018-08-05
jQuery

本章節分享一段程式碼例項，它實現了簡單的tab選項卡效果。

然後對程式碼的實現過程進行一下詳細分析。

程式碼如下: 

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style>
body{
  font:normal 12px/20px simsun; 
  margin:0 auto; 
  padding:0;
} 
*{
  margin:0px; 
  padding:0px;
}
h4{font-size:14px;}
h5{font-size:12px;}
img {border:none;}
ul,li{list-style-type:none;}
a{text-decoration:none;}
a:link{text-decoration:none;}
a:hover{
  text-decoration:underline;
  color:#ffae00;
}
#tab{
  width:240px; 
  margin:0 auto; 
  text-align:center;
}
.menu{
  height:35px; 
  line-height:32px; 
  padding-top:1px;
}
.menu a{
  display:inline-block; 
  height:35px; 
  line-height:35px; 
  width:116px; 
  text-align:center; 
  font-size:20px; 
  color:#999999; 
  font-weight:bold;
}
.menu a:hover, .menu a.on{
  color:#d33b55; 
  text-decoration:none;
}
.cnt{border:1px solid #999999; width:240px; height:100px;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
  $(".menu a").each(function(i){
    $(this).click(function(){
      $(".menu a").removeClass("on").eq(i).addClass("on");
      $(".cnt").hide().eq(i).show();
      return false;
    })
  })
});
</script>
</head>
<body>
<div id="tab">
  <div class="menu">
    <a href="#" class="on">螞蟻部落一</a>
    <a href="#">螞蟻部落二</a>
  </div>
  <div class="cnt">
    <ul>
      <li>softwhy.com</li>
    </ul>
  </div>
  <div class="cnt" style="display:none;">
    <ul>
      <li>螞蟻部落歡迎您</li>
    </ul>
  </div>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(document).ready(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.$(".menu a").each(function(i){})，使用each()方法遍歷連結a元素。

（3）.$(".menu a").removeClass("on").eq(i).addClass("on")，將所有的連結a元素中的class樣式類on刪除，然後再將為前點選的a元素新增樣式類a。

（4）.$(".cnt").hide().eq(i).show()，將選項卡內容部分隱藏，然後將當前索引的內容元素顯示。

（5）.return false，防止連結跳轉。

二.相關閱讀:

（1）.each()方法可以參閱jQuery each()一章節。

（2）.removeClass()可以參閱jQuery removeClass()一章節。

（3）.eq()方法可以參閱jQuery eq()一章節。

（4）.addClass()方法可以參閱jQuery addClass()一章節。

（5）.return false可以參閱連結中return false的作用是什麼一章節。

相關文章