效果
css
.tab{
position: relative;
width:100%;
}
.tab-head{
width: 1200px;
height:100%;
margin: auto;
font-size: 0;
}
.classifyTip{
width: 93px;
height: 48px;
line-height: 48px;
background-image: linear-gradient(0deg,
#6a97e2 0%,
#63a1f1 50%,
#5babff 100%);
display: inline-block;
overflow: hidden;
font-size: 14px;
letter-spacing: 0px;
color: #ffffff;
text-align: center;
}
.lidiv{
border: solid 1px #e7e7e7;
display: inline-block;
width: calc(100% - 100px);
box-sizing: border-box;
height: 48px;
}
.tab-head li{
width: 100px;
display: inline-block;
height: 100%;
overflow: hidden;
line-height: 43px;
text-align: center;
font-size: 14px;
}
li.selected{
border-bottom: 2px #6a97e2 solid;
color: #6a97e2;
}
.tab-content{
width: 1200px;
min-height:200px;
margin: auto;
font-size: 14px;
margin-bottom: 30px;
}
.tab-content > div{
display: none;
}
.tab-content .show{
display: block;
}
html
<div class="tab">
<div class="tab-head ">
<div class="classifyTip">分类</div>
<div class="lidiv">
<li class="selected">常规品种</li>
<li>非常规品种</li>
</div>
</div>
<div class="tab-content">
<div class="show">
tab1内容
</div>
<div>
tab2内容
</div>
</div>
</div>
js部分
$(function () {
var tabs = document.getElementsByClassName('tab-head')[0].getElementsByTagName('li'),
contents = document.getElementsByClassName('tab-content')[0].getElementsByTagName('div');
console.log("tabs",tabs,contents);
(function changeTab() {
for(var i = 0, len = tabs.length; i < len; i++) {
tabs[i].onmouseover = showTab;
}
})();
function showTab() {
for(var i = 0, len = tabs.length; i < len; i++) {
if(tabs[i] === this) {
tabs[i].className = 'selected';
contents[i].className = 'show';
} else {
tabs[i].className = '';
contents[i].className = '';
}
}
}
})