在前一段學習原生js中學習了選項卡的實現方式，其核心是切換css樣式，以實現視覺上的切換。在學習jquery中則有不同的方法，當然其思想也還是那個思想，只是有了封裝好的更簡單的方法。下面是菜鳥代碼,希望各位大神多提建議。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>inde02</title>
<script type="text/javascript" src="../jquery-2.2.1-min.js"></script>
<meta name="author" content="yangyu" />
<!-- Date: 2014-09-01 -->
<style type="text/css">
body {padding:0;margin:0;}
.container{margin:0 auto;width:500px;height:350px;background:#A7C942;}
.navigation{width:100%;height:50px;}
.navigation ul{margin:0;padding:0}
.navigation ul li{width:98px;height:48px;float: left;text-align:center;list-style:none;line-height:50px;
border:1px solid #EAF2D3;cursor: pointer;}
.now{background: #FF0000;}
.contant{width:500px;height:300px;background:#CCCCCC;}
.contant span{width:500px;height:300px;}
.hide{display:none;}
</style>
<script type="text/javascript">
$(document).ready(function(){
//獲取class名字爲navigation下的ul下的li
var menu=$(".navigation ul li");
//添加點擊事件
menu.click(function(){
//點擊後，先添加class爲now，然後使用siblings()遍歷該元素的同胞元素，並且去掉它們中class名字爲now的、保證只有一個li的calss爲now
$(this).addClass("now").siblings().removeClass("now");
//獲取li中的index的位置，是一個整數數值，類似數組角標
var index=menu.index(this);
//只對div.contant下面的span子集起作用，eq()方法選擇指定的元素，用show(),siblings（），和hide(),保證只有span顯示
$('div.contant > span').eq(index).show().siblings().hide();
});
});
</script>
</head>
<body>
<div class="container">
<div class="navigation">
<ul>
<li class="now">A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
</div>
<div class="contant">
<span>123</span>
<span class="hide">456</span>
<span class="hide">789</span>
<span class="hide">159</span>
<span class="hide">357</span>
</div>
</div>
</body>
</html>
源代碼免費下載：http://download.csdn.net/detail/u014703834/7851323
