您的位置：首页 > Web前端 > JavaScript

一个页面可以重复调用的TAB选项卡切换js代码 鼠标悬浮

2016-05-28 17:36 1066 查看 
/*下面是景点页面的变动代码*/

.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";
}
}
}
浏览器效果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航