tab选项卡代码（原生js）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了tab选项卡代码（原生js）相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab选项卡一练习</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#tab{
width: 400px;
height: 250px;
margin: 20px auto;
position: relative;
}
#tab #item{
width: 370px;
border: 1px solid #ccc;
height: 31px;
line-height: 31px;
border-right:none;
}
#tab #item li{
width: 40px;
height: 28px;
line-height: 28px;
font-size: 14px;
text-align:center;
list-style: none;
float:left;
padding: 2px 0px;
border-right:solid 1px #ccc;
}
#tab #item li a{
text-decoration:none;
color:#000;
}
#tab .box{
width: 370px;
height: 100%;
position: relative;
overflow: hidden;
z-index: 1;
}
#tab .box #picTxtBox{
width: 1000%;
position: absolute;
top: 0px;
left: 0px;
}
#tab .box #picTxtBox li{
list-style: none;
float:left;
}
img{
width: 400px;
height: 250px;
}
#tab .box #picTxtBox .text{
position: absolute;
bottom: 0px;
left: 0px;
background:#000;
opacity: 0.08;
width: 100%;
height: 40px;
color:white;
line-height: 40px;
font-size: 14px;
padding-left: 10px;
}
.box .btnleft{
position: absolute;
top: 40%;
left: 20px;
color:red;
font-size: 40px;
z-index: 999;
font-weight: bolder;
font-family: 黑体;
text-decoration:none;
display: none;
background:#cccccc;
width: 40px;
text-align: center;
opacity:0.3;
}
.box .btnright{
position: absolute;
top: 40%;
right: 20px;
color:red;
font-size: 40px;
z-index: 999;
font-weight: bolder;
font-family: 黑体;
text-decoration:none;
display: none;
background:#cccccc;
width: 40px;
text-align: center;
opacity:0.3;
}
.active{
background:royalblue;
}
</style>
<script>
window.onload=function(){
var oTab = document.getElementById("tab");
var oItem = document.getElementById("item");
var oLi = oItem.getElementsByTagName("li");
var oPicTxtBox = document.getElementById("picTxtBox");
var oPicTxtLi = oPicTxtBox.getElementsByTagName("li");
var oBtnLeft = document.getElementById("btnleft");
var oBtnRight = document.getElementById("btnright");
var iNow=0;
for(var i=0;i<oLi.length;i++){
oLi[i].index = i;
oLi[i].onmouseover=function(){
iNow = this.index;
move(iNow);
}
}
oTab.onmouseover = function(){
oBtnLeft.style.display = "block";
oBtnRight.style.display = "block";
}
oTab.onmouseout = function(){
oBtnLeft.style.display = "none";
oBtnRight.style.display = "none";
}
oBtnRight.onclick=function(){
iNow++;
if(iNow>oLi.length-1){
iNow = 0;
}
move(iNow);
// alert(iNow);
for(var n=0;n<oLi.length;n++){
oPicTxtLi[n].style.display = "none";
oLi[n].className = "";
}
document.title = "当前的索引是="+iNow;
oPicTxtLi[iNow].style.display = "block";
oLi[iNow].className = "active";
};
oBtnLeft.onclick=function(){
iNow--;
if(iNow<0){
iNow = oLi.length-1;
}
};
//封装的函数
function move(index){
for(var n=0;n<oLi.length;n++){
oPicTxtLi[n].style.display = "none";
oLi[n].className = "";
}
document.title = "当前的索引是="+iNow;
oPicTxtLi[iNow].style.display = "block";
oLi[iNow].className = "active";
}
}
</script>
</head>
<body>
<div id="tab">
<div class="item"id="item">
<li class="active"><a href="javascript:void(0);">资讯</a></li>
<li><a href="javascript:void(0);">娱乐</a></li>
<li><a href="javascript:void(0);">体育</a></li>
<li><a href="javascript:void(0);">汽车</a></li>
<li><a href="javascript:void(0);">时尚</a></li>
<li><a href="javascript:void(0);">历史</a></li>
<li><a href="javascript:void(0);">记实</a></li>
<li><a href="javascript:void(0);">精品</a></li>
<li><a href="javascript:void(0);">游戏</a></li>
</div>
<div class="box">
<a class="btnleft" id="btnleft" href="javascript:void(0)"><</a>
<a class="btnright" id="btnright" href="javascript:void(0)">></a>
<ul id="picTxtBox">
<li style="display: block">
<a href="javascript:void(0);"><img src="images/photo1.jpg"style="width: 370px"></a>
<p class="keep"> </p>
<p class="text">广州突发大火</p>
</li>
<li>
<a href="javascript:void(0);"><img src="images/photo2.jpg"style="width: 370px"></a>
<p class="keep"> </p>
<p class="text">精品</p>
</li>
<li>
<a href="javascript:void(0);"><img src="images/photo3.jpg"style="width: 370px"></a>
<p class="keep"> </p>
<p class="text">因为这张照片</p>
</li>
<li>
<a href="javascript:void(0);"><img src="images/photo4.jpg"style="width: 370px"></a>
<p class="keep"> </p>
<p class="text">亚洲女排</p>
</li>
<li>
<a href="javascript:void(0);"><img src="images/photo5.jpg"style="width: 370px"></a>
<p class="keep"> </p>
<p class="text">广州豪车</p>
</li>
<li>
<a href="javascript:void(0);"><img src="images/photo6.jpg"style="width: 370px"></a>
<p class="keep"> </p>
<p class="text">奥运冠军</p>
</li>
<li>
<a href="javascript:void(0);"><img src="images/photo7.jpg"style="width: 370px"></a>
<p class="keep"> </p>
<p class="text">军事机密</p>
</li>
<li>
<a href="javascript:void(0);"><img src="images/photo8.jpg"style="width: 370px"></a>
<p class="keep"> </p>
<p class="text">房产</p>
</li>
<li>
<a href="javascript:void(0);"><img src="images/photo9.jpg"style="width: 370px"></a>
<p class="keep"> </p>
<p class="text">游戏</p>
</li>
</ul>
</div>
</div>
</body>
</html>
以上是关于tab选项卡代码（原生js）的主要内容，如果未能解决你的问题，请参考以下文章