<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击切换选项卡代码</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
position: relative;
}
ul ,li{
list-style: none;
}
#menu li{
float: left;
border: 1px solid #dedede;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 16px;
background-color: #fff;
overflow: hidden;
}
#menu li.on{
background-color: #dedede;
color: red;
}
.bg{
width: 100%;
margin: 200px;
}
.clear{
clear: both;
}
#tab-con div{
width: 406px;
height: 100px;
display: none;
border: 1px solid #dedede;
}
#tab-con .on{
display: block;
background-color: #dedede;
}
</style>
</head>
<body>
<div class="bg">
<div id="menu">
<ul>
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<div class="clear"></div>
</ul>
<div class="clear"></div>
</div>
<div id="tab-con">
<div class="on">aaaa</div>
<div>bbbb</div>
<div>cccc</div>
<div>dddd</div>
</div>
</div>
</body>
<script type="text/javascript">
// js
var tabs=document.getElementById("menu").getElementsByTagName("li");
var divs=document.getElementById("tab-con").getElementsByTagName("div");
for(var i=0; i<tabs.length; i++){
tabs[i].onclick=function (){ change(this); }
}
function change(obj){
for(var i=0; i<tabs.length; i++){
if(tabs[i]==obj){
tabs[i].className="on";
divs[i].className="on";
}
else{
tabs[i].className="";
divs[i].className="";
}
}
}
// jQuery
var $list= $("#menu").find("li");
var $div= $("#tab-con").find("div");
$list.click(function(){
var index= $(this).index();
$list.eq(index).toggleClass("on").siblings().removeClass("on");
$div.eq(index).toggleClass("on").siblings().removeClass("on");
})
</script>
</html>转载于:https://my.oschina.net/u/2524300/blog/603268
3220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
