<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tab切换jquery代码</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
* {
margin:0;
padding:0;
}
.wrap {
margin:50px auto;
width:400px;
}
ul {
list-style:none;
width:100%;
}
.tab li {
float:left;
width:100px;
height:40px;
line-height:40px;
text-align:center;
cursor:pointer;
background-color:#fff;
}
.tab li.active {
background-color:#00bc12;
border-bottom: 2px solid blue;
color:#fff;
}
/*清除浮动*/
.clearfix:after {
content:'';
display:table;
clear:both
}
.clearfix {
*zonm:1;
}
/* IE 6/7 */
.clearfix {
zoom:1;
}
.product .main a img {
vertical-align:top;
}
.product .main {
width: 400px;
height: 400px;
line-height: 400px;
text-align: center;
border: 1px solid red;
display:none;
}
.product .main.selected {
display:block;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="tab clearfix">
<li onmouseenter="Move(this)" class="tab-item active">我是切换1</li>
<li onmouseenter="Move(this)" class="tab-item">我是切换2</li>
<li onmouseenter="Move(this)" class="tab-item">我是切换3</li>
<li onmouseenter="Move(this)" class="tab-item">我是切换4</li>
</ul>
<div class="product">
<div class="main selected">我是切换1</div>
<div class="main">我是切换2</div>
<div class="main">我是切换3</div>
<div class="main">我是切换4</div>
</div>
</div>
<script>
function Move(obj) {
$(obj).addClass("active").siblings().removeClass("active");
var index = $(obj).index(); //获取索引号
console.log(index);
$(".main").eq(index).addClass("selected").siblings().removeClass("selected");
}
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>tab切换jquery代码</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
* {
margin:0;
padding:0;
}
.wrap {
margin:50px auto;
width:400px;
}
ul {
list-style:none;
width:100%;
}
.tab li {
float:left;
width:100px;
height:40px;
line-height:40px;
text-align:center;
cursor:pointer;
background-color:#fff;
}
.tab li.active {
background-color:#00bc12;
border-bottom: 2px solid blue;
color:#fff;
}
/*清除浮动*/
.clearfix:after {
content:'';
display:table;
clear:both
}
.clearfix {
*zonm:1;
}
/* IE 6/7 */
.clearfix {
zoom:1;
}
.product .main a img {
vertical-align:top;
}
.product .main {
width: 400px;
height: 400px;
line-height: 400px;
text-align: center;
border: 1px solid red;
display:none;
}
.product .main.selected {
display:block;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="tab clearfix">
<li onmouseenter="Move(this)" class="tab-item active">我是切换1</li>
<li onmouseenter="Move(this)" class="tab-item">我是切换2</li>
<li onmouseenter="Move(this)" class="tab-item">我是切换3</li>
<li onmouseenter="Move(this)" class="tab-item">我是切换4</li>
</ul>
<div class="product">
<div class="main selected">我是切换1</div>
<div class="main">我是切换2</div>
<div class="main">我是切换3</div>
<div class="main">我是切换4</div>
</div>
</div>
<script>
function Move(obj) {
$(obj).addClass("active").siblings().removeClass("active");
var index = $(obj).index(); //获取索引号
console.log(index);
$(".main").eq(index).addClass("selected").siblings().removeClass("selected");
}
</script>
</body>
</html>