tab切换就是鼠标放在某个标签上下面显示的就是该标签相关的内容,效果如下
当鼠标放在电影上显示的是电影内容,放在电视上显示的是电视内容,放在综艺上显示的是综艺内容,
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换练习</title>
<style>
.active{
color: orange;
}
span{
padding: 5px 20px;
}
.tab_con>div{
display: none;
}
.tab_con>div.show{
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="tabs">
<span class="active">电影</span>
<span>电视</span>
<span>综艺</span>
</div>
<div class="tab_con">
<div class="show">电影内容</div>
<div>电视内容</div>
<div>综艺内容</div>
</div>
</div>
</body>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(".tabs span").mouseenter(function () {
//给鼠标正在放着的标签添加一个active的class,删掉它的兄弟标签的active的class
$(this).addClass('active').siblings().removeClass('active')
// 获得鼠标正在放着的标签的index'
var index=$(this).index();
//找到与index相等的内容div,并给它加一个show的class,删掉它兄弟div的show的class
$('.tab_con>div').eq(index).addClass('show').siblings().removeClass('show')
})
</script>
</html>
上面代码对应的是当span标签的顺序与内容中div的顺序一一对应的情况下的代码处理
当顺序不一样时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换练习</title>
<style>
.active{
color: orange;
}
span{
padding: 5px 20px;
}
.tab_con>div{
display: none;
}
.tab_con>div.show{
display: block;
}
</style>
</head>
<body>
<div class="container">
<div class="tabs">
<span class="active" id="movie">电影</span>
<span id="tv">电视</span>
<span id="zy">综艺</span>
</div>
<div class="tab_con">
<div class="show movie">电影内容</div>
<div class="tv">电视内容</div>
<div class="zy">综艺内容</div>
</div>
</div>
</body>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(".tabs span").mouseenter(function () {
$(this).addClass('active').siblings().removeClass('active')
var id =$(this).attr('id');
$('.tab_con>div').each(function (i) {
if($(this).attr('class').indexOf(id)!=-1){
$(this).addClass('show').siblings().removeClass('show')
}
})
})
</script>
</html>