类操作
addClass()添加类
removeClass()移除类
hasClass()是否包含类
ttoggleClass()切换类
操作类样式的时候,所有的类名,都不带点(.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin: 0;
}
ul{
list-style: none;
}
.wrapper{
width:1000px;
height:475px;
margin: 0 auto;
margin-top: 100px;
}
.tab{
border:1px solid #dddddd;
border-bottom: 0;
height:36px;
width: 320px;;
}
.tab li{
position: relative;
float: left;
width:80px;
height:34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top:4px solid #fff;
}
.tab span{
position: absolute;
right:0;
top:10px;
background-color: #dddddd;
width:1px;
height:14px;
overflow: hidden;
}
.products{
width:1002px;
border:1px solid #dddddd;
height:476px;
}
.products .main{
float: left;
display: none;
}
.products .main.selected{
display: block;
}
.tab li.active{
border-color: red;
border-bottom: 0;
}
</style>
<script src="js/jquery-1.11.1.js"></script>
<script>
$(window).ready(function () {
$(".tab>li").mouseenter(function () {
$(this).addClass("active").siblings("li").removeClass("active");
$(".products>div").eq($(this).index()).addClass("selected").siblings("div").removeClass("selected");
});
});
</script>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>|</span></li>
<li class="tab-item">国际大牌<span>|</span></li>
<li class="tab-item">国际大牌<span>|</span></li>
<li class="tab-item">国际大牌</li>
</ul>
<div class="products">
<div class="main selected">
<a href="###"><img src="imgs/guojidapai.jpg"></a>
</div>
<div class="main">
<a href="###"><img src="imgs/guozhuangmingpin.jpg"></a>
</div>
<div class="main">
<a href="###"><img src="imgs/qingjieyongpin.jpg"></a>
</div>
<div class="main">
<a href="###"><img src="imgs/nanshijingpin.jpg"></a>
</div>
</div>
</div>
</body>
</html>