jQuery实现栏目切换

如图要实现不同栏目的切换，点击某个标题就切换对应的栏目块，这里我们利用jQuery来实现

我们的总体的思路是实现板块的隐藏和显示，点击相应的板块，就将对应的板块显示出来，点击另外一个就隐藏，那么这里我们每一个模块都有显示框，如何实现点击时事，就找到对应的时事的模块，是我们需要解决的问题。

比如我们点击时事的时候，通过时事的id来获取到时事对应的模块，那么这里我们可以设置时事的标题和模块的id相同。

那么我们先将大概的框架写出来



具体的HTML和CSS代码如下

<ul>
<li>时事</li>
<li>体育</li>
<li>政治</li>
</ul>
<div>时事栏目</div>
<div>体育栏目</div>
<div>政治栏目</div>

CSS代码

ul{
list-style: none;
margin-bottom: 0;
}
ul li{
width: 100px;
height: 50px;
border: 1px solid gray;
background-color: lightgray;
display: inline-block;
line-height: 50px;
text-align: center;
font-family: "微软雅黑";
font-size: 18px;
}
div{
width: 310px;
height: 200px;
border: 1px solid grey;
text-align: center;
line-height: 200px;
margin-left: 40px;
margin-top: 0px;
position: relative;
}

下面我们先给每个li一个点击事件，点击不同的栏目主题时相应的li的背景颜色发生变换，

$(function(){
$("li").click(function(){
$(this).css("background-color","aquamarine");
})
})

由于这里我们需要点击下一个li元素之前需要将所有的li的背景颜色重置为最初的颜色。所以还需要添加如下代码

$(function(){
$("li").click(function(){
$("li").css("background-color","lightgray")
$(this).css("background-color","aquamarine");
})
})

那么现在我们点击下一个li元素的时候前面的li的背景就已经被重置了



接下来我们的任务就是点击li时显示对应的div

那么怎样找到正确的div呢，这里我们需要通过id来寻找

通过this找到li的id，如果li的id和div的id相等，就替换

id= $(this).attr("id");

这里我们通过attr(“id”);属性来查找对应的li的id，这里的this返回的时点击的li的jQuery对象。

我们同样可以通过控制台来检验一下是否能够获取到正确的id



可以看到我们点击对应的li，返回的对应的li的id

拿到了点击的li元素的id之后我们就可以和div的id进行匹配。

那么如何遍历所有的div呢，这里我们可以通过$(“div”).each(index,val)进行遍历

$("div").each(function(i,val){
console.log(i);
console.log(val);
})

i为div数组的索引值，val为整个div的标签



那么这里我们点击依次li，就返回所有的div的索引值和对应的标签

这里我们有个投机取巧的方式，是把li的id设置为和div的index的下标相同分别对应为0，1，2下面我们在遍历div的时候如果div的数组下标和li的id相同，那么我们就进行相应的div的显示，否则就隐藏，这里我们还要注意将li的第二个元素和最后一个元素$(“li:eq(1)，li:last-child”).hide;进行隐藏。

$("div:eq(1),div:last-child").hide();//默认为隐藏

同时还要注意遍历div的时候，这里的this代表的是当前的div，而点击事件的中的this是当前选中的li，

$("div").each(function(i,val){
//          console.log(i);
//          console.log(val);
if(id== i){
$(this).show();
}else{
$(this).hide();
}

})

同时还要注意利用(“div”).each(function(i,val))each函数里面还有一个function。同时返回的当前的div利用(this)代替

那么现在我们总体的额效果就已经实现了