<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}
.tab {
border: 1px solid #ddd;
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: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}
.products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}
.products .main {
float: left;
display: none;
}
.products .main.selected {
display: block;
}
.tab li.active {
border-color: red;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="tab" id="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" id="products">
<div class="main selected">
<a href="###"><img src="data:images/guojidapai.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="data:images/guozhuangmingpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="data:images/qingjieyongpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="data:images/nanshijingpin.jpg" alt=""/></a>
</div>
</div>
</div>
</body>
</html>
<script>
// 功能需求：鼠标移入tab选项卡时，
// 1. 上面tab选项卡要切换
// 2. 下面产品内容要切换
// PS: 提前预知知识点
var tab = document.getElementById('tab'); // 这句话是在整个网页文档(document)里通过id查找tab
// 获取products盒子下的div盒子
var divBoxs = document.getElementById('products').getElementsByTagName('div');
var tabItem = tab.getElementsByTagName('li'); // 这句是约束在选项卡(tab) 里通过标签名查找li
// 接着往后书写逻辑，
// tab栏效果上方功能需求的描述。
// 鼠标移入后，排他思想，选择当前选择卡 (前提是选项卡与产品内容页数相同)
for (var i = 0 ; i < tabItem.length ; i++) {
tabItem[i].index = i;
tabItem[i].onmouseover = function () {
// 排他思想
for(var j = 0 ; j < tabItem.length ; j++) {
tabItem[j].className = "tab-item";
divBoxs[j].className = "main";
}
// 选中当前选项卡
this.className = "tab-item active";
// 选择产品内容页
divBoxs[this.index].className = "main selected";
}
}
</script>