Tab栏切换案例
想要实现鼠标点击Tab栏,然后它就会显示想要的效果。
实现代码:
Tab栏切换效果
img{height: 500px; width: 800px}
h1{text-align: center}
ul li{list-style: none; float: left; margin-right: 55px }
.tab{width: 802px; height: 524px; margin: 0px auto; background:paleturquoise}
.tab_list{width: 800px; height: 55px; border: 1px solid red; cursor: pointer}
.tab_content{width: 800px; height: 520px; border: 1px solid blue;}
.tab_list .current{background: pink; color: red; font-weight: bold}
.item{display: none;}
Tab栏切换效果
好看电视剧
安家
猎罪图鉴
三十而已
雪中悍刀行
余生请多指教
亲爱的热爱的
你是我的城池营垒
好看电视剧模块
安家模块
猎罪图鉴模块
三十而已模块
雪中悍刀行模块
余生请多指教模块
亲爱的热爱的模块
你是我的城池营垒模块
$(function (){
//1.点击上部的li,当前li添加current类,其余的兄弟移除类
$('.tab_list li').click(function () {
$(this).addClass('current').siblings().removeClass('current');
//2.得到当前li的索引号
var ind = $(this).index();
//3.让类容部分相应索引号的item显示处理,其余的隐藏
$('.tab_content .item').eq(ind).show().siblings().hide();
});
})
运行结果:
注意:1.class属性操作 addClass添加class操作 removeClass移除class操作
2.css()方法
案例所用图片如下:







