如图要实现不同栏目的切换,点击某个标题就切换对应的栏目块,这里我们利用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利用
(
“
d
i
v
”
)
.
e
a
c
h
(
f
u
n
c
t
i
o
n
(
i
,
v
a
l
)
)
e
a
c
h
函
数
里
面
还
有
一
个
f
u
n
c
t
i
o
n
。
同
时
返
回
的
当
前
的
d
i
v
利
用
(this)代替
那么现在我们总体的额效果就已经实现了