急.......JS实现Tab菜单的问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了急.......JS实现Tab菜单的问题相关的知识，希望对你有一定的参考价值。
请教高手，这段代码是用id调用CSS样式的，现在我把（#tab，#menu）它前面的#符号全改成(.tab)用class类别选择器调用所有CSS样式，这样可以实现N次调用，但是用class调用CSS样式时，就不能实现鼠标经过时滑动的效果了，可能是JS调用的问题，麻烦高手帮忙解决下！小弟先跪谢了！最好能给个实列！
代码如下
<title>Tab菜单</title>
<style type="text/css">
bodymargin-bottom:20px;
background-color:Gray;
#tabwidth:980px;
border:0px;
#menu
float:left;
z-index:0;
#menu ulmargin:0px;
padding:0px;
list-style-type:none;
#menu lifloat:left;
display:block;
cursor:pointer;
width:130px;
text-align:center;
padding:10px 0px;
background-color:#a3dbff;
border-right:1px solid #fff;
#menu li.hoverbackground:#fff;
border-bottom:solid 1px #fff;
#main1z-index:-1;
position:relative;
top:-1px;
clear:left;
border:solid 1px blue;
background-color:#C6E2FF;
#main1 uldisplay: none;
list-style:none;
#main1 ul.block
display: block;
</style>
<script type="text/javascript">
function setTab(n)
var tli=document.getElementById("menu").getElementsByTagName("li");
var mli=document.getElementById("main1").getElementsByTagName("ul");
for(i=0;i<tli.length;i++)
tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
</script>
</head>
<body>
<div>
<div id="tab">
<div id="menu">
<ul>
<li class="hover" onmouseover="setTab(0)">菜单1</li>
<li onmouseover="setTab(1)">菜单2</li>
<li onmouseover="setTab(2)">菜单3</li>
<li onmouseover="setTab(3)">菜单4</li>
<li onmouseover="setTab(4)">菜单5</li>
<li onmouseover="setTab(5)">菜单6</li>
</ul>
</div>
<div id="main1">
<ul class="block">
<li>aaaaaaaaa</li>
</ul>
<ul>
<li>bbbbbbbbbb</li>
</ul>
<ul>
<li>cccccccccc</li>
</ul>
<ul>
<li>ddddddddd</li>
</ul>
<ul>
<li>44444444</li>
</ul>
<ul>
<li>555555555</li>
</ul>
</div>
</div>
</div>
http://oa.haihua.com.cn/hse
打开网址自己查看代码。 参考技术B 按你的思路改的话，js部分至少还需要自己实现getElementsByClassName()方法和类似jQuery的children()方法才能实现。
现在流行的js库一般都有现成的tab效果，jQuery ui的tab效果参见：
http://jqueryui.com/demos/tabs/
参考资料：http://jqueryui.com/demos/tabs/
JS 二级菜单栏的tab切换
<style>
#first{
display: flex;
justify-content:space-between;
}
li{
list-style-type:none ;
border: 1px solid #999;
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: pink;
color: white;
}
div{
display: flex;
justify-content: space-between;
}
.active{
background-color: darkgrey;
}
.show{
display: block;
}
.style{
display: none;
}
li>ul{
display: none;
margin-left: -41px;
}
</style>
</head>
<body>
<ul id="first">
<li onmouseover="hov(‘one‘,this)" onmouseout="out(‘one‘,this)">列表一 //给每个菜单栏设置鼠标移入移出事件
<ul id="one">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li onmouseover="hov(‘two‘,this)" onmouseout="out(‘two‘,this)">列表二
<ul id="two">
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
</ul>
</li>
<li onmouseover="hov(‘three‘,this)" onmouseout="out(‘three‘,this)">列表三
<ul id="three">
<li>55</li>
<li>66</li>
<li>77</li>
<li>88</li>
</ul>
</li>
<li onmouseover="hov(‘four‘,this)" onmouseout="out(‘four‘,this)">列表四
<ul id="four">
<li>88</li>
<li>433</li>
<li>222</li>
<li>124</li>
</ul>
</li>
</ul>
<script>
function hov(id1,e){
var num = document.querySelector("#" + id1);
num.className="show";
e.className="active";
}
function out(id1,e){
var num = document.querySelector("#" + id1);
num.className="";
e.className="";
}
</script>
</body>
</html>
使用鼠标移入移出事件，，，，，，，，，，，，，，，
以上是关于急.......JS实现Tab菜单的问题的主要内容，如果未能解决你的问题，请参考以下文章