display:block和display:none在一起的时候不是会覆盖none吗？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tab栏切换</title>
<script src="jquery-1.11.1.min.js"></script>
<style>
*{/*去除页面原有边距*/
margin: 0;
padding: 0;
}
.wrapper{/*定义标题盒子*/
width: 326px;
height: 29px;
margin: 100px auto;
border: 1px solid red;
}
.products{/*定义产品盒子*/
width: 1200px;
height: 500px;
margin: 0px auto;
border: 1px solid #931CBB;
}
.tab-item{/*标题栏设置*/
float:left;
display: block;
font-size: 20px;/*字体大小*/
background-color: white;
}
.active{/*标题栏选中状态*/
border-top: 3px solid red;
}
.selected{/*显示产品*/
display: block;
}
.main{/*隐藏产品*/
display: none;
}
img{/*定义图片*/
float: left;
width: 600px;
height: 250px;
}
a:hover{/*鼠标悬停变色*/
background-color:aqua;
}
ul{/*去除小圆点*/
list-style: none;
}
a{
text-decoration: none;/*去除下划线*/
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item"><a href="#">国际大牌</a></li>
<li class="tab-item"><a href="#">国妆名牌</a></li>
<li class="tab-item"><a href="#">清洁用品</a></li>
<li class="tab-item"><a href="#">男士精品</a></li>
</ul>
</div>
<div class="products">
<div class="main">
<img alt="" src="../../../图片/一个人⭕⭕的小日子/2.png">
<img alt="" src="../../../图片/一个人⭕⭕的小日子/5.png">
<img alt="" src="../../../图片/黄昏少女/11.png">
<img alt="" src="../../../图片/黄昏少女/8.png">
</div>
<div class="main">
<img alt="" src="../../../图片/黄昏少女/1.png">
<img alt="" src="../../../图片/黄昏少女/2.png">
<img alt="" src="../../../图片/黄昏少女/3.png">
<img alt="" src="../../../图片/黄昏少女/4.png">
</div>
<div class="main">
<img alt="" src="../../../图片/黄昏少女/5.png">
<img alt="" src="../../../图片/黄昏少女/5.png">
<img alt="" src="../../../图片/黄昏少女/5.png">
<img alt="" src="../../../图片/黄昏少女/5.png">
</div>
<div class="main">
<img alt="" src="../../../图片/黄昏少女/7.png">
<img alt="" src="../../../图片/黄昏少女/7.png">
<img alt="" src="../../../图片/黄昏少女/7.png">
<img alt="" src="../../../图片/黄昏少女/7.png">
</div>
</div>
</body>
<script>
// 需求1：给tab栏的每一个li标签设置鼠标移入事件：当前li添加active类，其他的兄弟li移除active类
// 需求2：给当前索引栏引入一致的div，让他添加selected类，其他的兄弟div移除selected类
$(function(){
$('.tab>.tab-item').mouseenter(function(){
$(this).addClass('active').siblings('li').removeClass('active');
// 获取当前这个li标签的索引
var index1=$(this).index();
console.log(index1);
// 需求2：
$('.products>.main').eq(index1).addClass('selected').siblings('div').removeClass('selected');
});
$('.tab>.tab-item').mouseleave(function(){
$(this).removeClass('active');
});
});
</script>
</html>
