本文给大家介绍如何用css实现二维码扫描的效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
这是html代码
- tab1
- tab2
- tab3
-
模块一
-
模块二
-
模块三
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内容
})
}
});效果图：
立即学习“Java免费学习笔记（深入）”；
总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程！
相关推荐：
