jQuery实现tab栏切换
<!DOCTYPE html>
<html lang="en">
<head lang="en">
<meta charset="utf-8">
<title>jQuery实现tab栏切换效果</title>
<style>
* {
list-style: none;
margin: 0px;
padding: 0px;
}
nav{
width: 800px;
height: 50px;
background: #ddffab;
margin: 100px auto 50px;
padding-left: 100px;
}
ul li{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 25px;
float: left;
font-size: 24px;
color: #470a47;
background-color: #acdeff;
margin-right: 100px;
cursor: pointer;
}
.tabbg{
background-color: #df9323;
}
.content{
width: 550px;
height: 390px;
border: 5px dashed #abdeff;
margin: 0 auto;
}
.content div{
display: none;
width: 550px;
height: 390px;
border: 5px dashed #abdeff;
margin: 0 auto;
}
.content .div_show{
display: block;
}
</style>
</head>
<script type="text/javascript" src="./jquery-1.9.0.min.js"></script>
<body>
<nav>
<ul>
<li>加菲猫</li>
<li>柯基犬</li>
<li>垂耳兔</li>
<li>荷兰猪</li>
</ul>
</nav>
<div class="content">
<div>11加菲猫11</div>
<div>22柯基犬22 </div>
<div>33垂耳兔33 </div>
<div>44荷兰猪44</div>
</div>
<script>
$('ul li').eq(0).addClass('tabbg');
$('.content div').eq(0).css('display','block');
$('ul li').each(function(){
var i = $(this).index();
$(this).click(function(event) {
$('ul li').removeClass('tabbg');
$(this).addClass('tabbg');
$('.content div').hide();
$('.content div').eq(i).show();
})
})
</script>
</body>
</html>
<!-- -->
javascript 原生实现 tab栏切换
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>tab栏</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.box {
width: 400px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
.hd {
height: 45px;
}
.hd span {
display: inline-block;
width: 90px;
background-color: pink;
line-height: 45px;
text-align: center;
cursor: pointer;
}
.hd span.current {
background-color: yellowgreen;
}
.bd li {
height: 255px;
background-color: yellowgreen;
display: none;
}
.bd li.current {
display: block;
font-size: 36px;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="hd">
<span class="current">体育</span>
<span>娱乐</span>
<span>新闻</span>
<span>综合</span>
</div>
<div class="bd">
<ul>
<li class="current">我是体育模块</li>
<li>我是娱乐模块</li>
<li>我是新闻模块</li>
<li>我是综合模块</li>
</ul>
</div>
</div>
<script src="./jquery-1.9.0.min.js"></script>
<script>
var box = document.getElementById("box");
var spans = box.getElementsByTagName("span");
var lis = box.getElementsByTagName("li");
for (var i = 0; i < spans.length; i++) {
spans[i].aaa = i;
spans[i].onclick = function () {
for (var i = 0; i < spans.length; i++) {
spans[i].className = "";
lis[i].className = "";
}
this.className = "current";
lis[this.aaa].className = "current";
}
}
</script>
</body>
</html>