css配合JavaScript实现tab标签切换效果
程序员文章站
2023-12-11 08:28:40
本文给大家介绍如何用css实现二维码扫描的效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
这是html代码
本文给大家介绍如何用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;
}
下面是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内容
})
}
});
效果图：