案列demo：http://codepen.io/tianzi77/pen/yNJVaM
首先写结构：
<body>
<ul id="nav">
<li class="current">tianzi</li>
<li>tianzi</li>
<li>tianzi</li>
</ul>
<div id="content">
<div class="show">content区域</div>
<div>content1</div>
<div>content2</div>
</div>然后添加样式：
*{
padding:0;
margin: 0;
}
body{
margin:0 50%;
}
#nav{
width: 500px;
height: 50px;
line-height: 50px;
list-style: none;
border-radius: 20px;
margin-bottom: 5px;
}
#nav li{
float: left;
padding-right: 10px;
border-left: 1px solid green;
font-size: 2em;
font-family: "微软雅黑";
cursor: pointer;
}
#nav li.current{
background: #abcdef;
}
#nav li:hover{
color: #fff;
background: red;
cursor: pointer;
}
#content div{
width: 270px;
height: 180px;
border:1px solid blue;
box-sizing:border-box;
display: none;
}
#content div.show{
display: block;
}纯javascript控制表现：
window.onload=function(){
var ul=document.getElementById("nav");
var li=ul.getElementsByTagName("li");
var content=document.getElementById("content");
var div=content.getElementsByTagName(‘div‘);
for(var i=0;i<li.length;i++){
li[i].index=i;
li[i].onclick=function(){
for(var j=0;j<li.length;j++){
li[j].className="";
div[j].style.display="none";
}
this.className="current";
div[this.index].style.display="block";
}
}
}用js写代码比较多，而且里面有2层循环很饶人。那么我用jquery写了一下：
jq代码：
$(function(){
$("ul li").click(function(){
$(this).addClass("current").siblings().removeClass("current");
$("#content div").eq($(this).index()).show().siblings().hide();
})
})基本2行代码就搞定，由于jquery支持强大的链式操作，所以以上代码完全可以精简为一行：
$(this).addClass("current").siblings().removeClass("current").parent().next().children().eq($(this).index()).show().siblings().hide();不得不说jquery真是强大，研究其源码就是定义了$这个强大 的选择符。
时间： 2024-08-21 06:51:13