版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/nalan77/article/details/85459987
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现简易选项卡功能</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/page.css">
<script src="js/js.js"></script>
</head>
<body>
<div class="tabtoggle clearfix">
<ul class="tabhead">
<li><a href="">选项卡1</a></li>
<li class="current"><a href="">选项卡2</a></li>
<li><a href="">选项卡3</a></li>
</ul>
<ul class="tabbody">
<li><a href="">选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容1</a></li>
<li><a href="">选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容2</a></li>
<li><a href="">选项卡选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容选项卡内容3</a></li>
</ul>
</div>
</body>
</html>@charset "utf-8";
.tabtoggle{width: 300px;height: auto;box-shadow: 2px 2px 4px #ccc;}
.tabhead{height: 45px;line-height: 45px;background: #1a77a8;}
.tabhead li{float: left;width: 100px;border-right: 1px solid #ddd;text-align: center;cursor: pointer;}
.tabhead li:last-of-type{border-right: none;}
.tabhead a{color: #ddd;}
.tabhead li:hover,.tabhead li.current{background: #195e82;}
.tabbody a{font-size: 16px;color: #222;}
.tabbody li{width: 100%;padding: 10px;display: none;}
.tabbody li:hover,.tabbody li.current{display: block;}window.onload=function(){
var tabhead=document.getElementsByClassName("tabhead")[0];
var hlis=tabhead.getElementsByTagName("li");
var tabbody=document.getElementsByClassName("tabbody")[0];
var blis=tabbody.getElementsByTagName("li");
for(var i=0;i<hlis.length;i++){
if(hlis[i].className.indexOf("current")!=-1){
blis[i].style.display="block";
}
}
for(var i=0;i<hlis.length;i++){
(function(n){
hlis[n].onmousemove=function(){
for(var j=0;j<hlis.length;j++){
hlis[j].className=hlis[j].className.replace("current","");
blis[j].style.display="none";
}
hlis[n].className+=" current";
blis[n].style.display="block";
}
})(i);
}
}