css配合JavaScript实现tab标签切换效果
编程学习 2021-07-04 16:46www.dzhlxh.cn编程入门
本篇文章我们给大家分享一个关于CSS配合JS实现的TAB标签切换效果，需要的朋友们可以测试下。
本文给大家介绍如何用CSS实现二维码扫描的效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
这是html代码
<p id="main">
<!--标题-->
<ul id="tab">
<li class="showed">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<!--内容-->
<p id="contents">
<ul style="display:block;"><!--默认显示第一个-->
<span>模块一</span>
</ul>
<ul>
<span>模块二</span>
</ul>
<ul>
<span>模块三</span>
</ul>
</p>
</p>
CSS样式
li{
list-style:none;
}
#main {
width: 600px;
margin: 200px auto;
}
#tab {
overflow: hidden;
background: #000;
border: 1px solid #000;
}
#tab li {
float: left;
color: #fff;
height: 30px;
cursor: pointer;
line-height: 30px;
padding: 0 20px;
}
#tab li.showed {
color: #000;
background: #ddd;
}
#contents {
border: 1px solid #000;
border-top-width: 0;
}
#contents ul {
line-height: 150px;
display:none;
margin: 0 30px;
padding: 10px 0;
}
狼蚁网站SEO优化是JS了
$(function() {
window.onload = function() {
var lis = $('#tab li');
var uls = $('#contents ul');
lis.click(function() {
var li_selected = $(this); //选中的li分类
var num = li_selected.index(); //相对于同胞元素的位置
lis.removeClass(); //清空liCSS属性
li_selected.addClass('showed'); //选中li添加属性
uls.css('display', 'none'); //隐藏所有ul标签
uls.eq(num).css('display', 'block'); //展示选中的li所对应的ul内容
})
}
});
效果图：