一个页面可以重复调用的TAB选项卡切换js代码 鼠标悬浮
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个页面可以重复调用的TAB选项卡切换js代码 鼠标悬浮相关的知识，希望对你有一定的参考价值。
/*下面是景点页面的变动代码*/
.tabbox {
height: 176px;
padding-bottom: 10px;
}
.tabmenu {
height:25px;
background:url(../imges/scenery_04.jpg) right no-repeat;
}
.tabmenu ul {margin:0;padding:0;list-style-type: none;
border-bottom:solid 1px #816e59;
height:25px;}
.tabmenu li {
overflow:hidden;
float:left;
text-align:center;
width:89px;
height:23px;
line-height:23px;
border-bottom:solid 1px #816e59;
padding-top:2px;
}
.tabmenu ul .cli {
overflow:hidden;
border-bottom:solid 1px #FFF;
border-left:solid 1px #816e59;
border-right:solid 1px #816e59;
border-top:solid 1px #816e59;
font-weight:bold;
cursor:pointer;
width:89px;
height:22px;
line-height:23px;
padding-top:2px;
}
#tabcontent,#tabcontent2,#tabcontent3 {
padding: 5px 10px 18px;
}
#tabcontent ul,#tabcontent2 ul ,#tabcontent3 ul {margin:0;padding:5px;list-style-type: none;}
#tabcontent .hidden,#tabcontent2 .hidden,#tabcontent3 .hidden {display:none;}
.tabbox #tabcontent p,.tabbox #tabcontent2 p,.tabbox #tabcontent3 p{
line-height:20px;
color:#816e59;
text-indent:2em;
}
.tabbox #tabcontent p a,.tabbox #tabcontent2 p a,.tabbox #tabcontent3 p a{
color:#816e59;}
.tabbox #tabcontent p a:hover,.tabbox #tabcontent2 p a:hover,.tabbox #tabcontent3 p a:hover{
text-decoration:none;}<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="utf-8"> <title>TAB切换</title> <link rel="stylesheet" type="text/css" href="12.css" > <script src="12.js"></script> </head> <body> <div class="tabbox"> <div class="tabmenu"> <ul> <li onmouseover="tabChange(this,‘tabcontent‘)" >婺源东线景点</li> <li onmouseover="tabChange(this,‘tabcontent‘)" class="cli">李坑</li> <li onmouseover="tabChange(this,‘tabcontent‘)">江湾</li> <li onmouseover="tabChange(this,‘tabcontent‘)">汪口</li> <li onmouseover="tabChange(this,‘tabcontent‘)">江岭</li> <li onmouseover="tabChange(this,‘tabcontent‘)">晓起</li> <li onmouseover="tabChange(this,‘tabcontent‘)">庆源</li> </ul> </div> <div id="tabcontent"> <ul class="hidden"> <li><a href="#">1111111111111111111111</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> </ul> <ul name="tabul"> <img src="imges/index_38.jpg" width="321" height="99" /><h4>小桥流水人家 -- 李坑</h4> <p><a href="#">李坑是一个以李姓聚居为主的古村落，距婺源县城12公里。李坑的建筑风格独特，是著名的徽派建筑。给人一种安静、祥和的气氛。李坑自古文风鼎盛、人才辈出。自宋至清，仕官富贾达百人，村里的文人留下传世著作达29部，南宋年间出...</a></p> <p> </p> </ul> <ul class="hidden"> <li><a href="#">3333333333333333333333</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> </ul> <ul class="hidden"> <li><a href="#">444444444444444444444444</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> </ul> <ul class="hidden"> <li><a href="#">55555555555555555555555</a></li> <li><a href="#">222222222xcC22222</a></li> <li><a href="#">2222222f s f22222</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> <li><a href="#">2222222222222222222222</a></li> </ul> <ul class="hidden"> <li><a href="#">6666666666666666666666</a></li> <li><a href="#">7777777777777777777</a></li> <li><a href="#">7777777777777777777</a></li> <li><a href="#">7777777777777777777</a></li> <li><a href="#">7777777777777777777</a></li> <li><a href="#">7777777777777777777</a></li> </ul> <ul class="hidden"> <li><a href="#">7777777777777777777</a></li> <li><a href="#">7777777777777777777</a></li> <li><a href="#">7777777777777777777</a></li> <li><a href="#">7777777777777777777</a></li> <li><a href="#">7777777777777777777</a></li> <li><a href="#">7777777777777777777</a></li> </ul> </div> </div> </canvas> </body> </html>
function tabChange(obj,id)
{
var arrayli = obj.parentNode.getElementsByTagName("li"); //获取li数组
var arrayul = document.getElementById(id).getElementsByTagName("ul"); //获取ul数组
for(i=0;i<arrayul.length;i++)
{
if(obj==arrayli[i])
{
arrayli[i].className = "cli";
arrayul[i].className = "";
}
else
{
arrayli[i].className = "";
arrayul[i].className = "hidden";
}
}
}浏览器效果：
以上是关于一个页面可以重复调用的TAB选项卡切换js代码 鼠标悬浮的主要内容，如果未能解决你的问题，请参考以下文章