一、代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab欄目仿寫</title>
<style>
*{
padding: 0;
margin: 0;
list-style: none
}
.container{
margin: 200px 100px;
border: 1px solid #015293;
width: 70%;
height: 400px;
}
.side{
width: 20%;
margin: 10px 10px;
float: left;
}
#tab li{
padding: 20px 0;
margin-top: 10px;
color: #015293;
background: #ECF8F8;
border-radius: 15px;
font-weight: bold;
text-align: center;
cursor: pointer;
position: relative;
}
/* #tab li:hover{
color: #FFF;
background: #015293;
} */
.hov:after{
content: '';
border: 15px solid transparent;
border-left: 15px solid #015293;
position: absolute;
top: 15px;
right: -26px;
}
#content{
border: 1px solid #E8E8E8;
width: 75%;
height: 360px;
margin: 20px 10px;
float: left;
}
#content>div{
display: none;
}
/* .tex{
display: none;
} */
.nohide{
display: block !important;
font-weight: bold;
}
.nohide p{
text-indent: 2em;
}
</style>
</head>
<body>
<div class="container">
<div class="side">
<ul id="tab">
<li>走進焦作</li>
<li>要聞動態</li>
<li>政務公開</li>
<li>政務服務</li>
<li>政民互動</li>
</ul>
</div>
<div id="content">
<div class="nohide">
<p>
1
</p>
</div>
<div class="tex">
<p>
2
</p>
</div>
<div class="tex">
<p>
3
</p>
</div>
<div class="tex">
<p>
4
</p>
</div>
<div class="tex">
<p>
5
</p>
</div>
</div>
</div>
<script>
var tabs=document.getElementById('tab').getElementsByTagName('li');
var sen=document.getElementById('content').getElementsByTagName('div');
for (var i=0;i<tabs.length;i++){
tabs[i].onmouseover=function(){
change(this);
}
}
function change(obj){
for (var i=0;i<tabs.length;i++){
if(tabs[i]===obj){
tabs[i].className="hov";
tabs[i].style.color="#FFF";
tabs[i].style.background="#015293";
sen[i].className="nohide";
}
else{
tabs[i].style.color="#015293";
tabs[i].style.background="#ECF8F8";
tabs[i].className='';
sen[i].className='';
}
}
}
</script>
</body>
</html>
二、效果
