js导航条下拉菜单的问题，为什么菜单项无法选中

JavaScript017

js导航条下拉菜单的问题，为什么菜单项无法选中,第1张

不算太明白你说的意思，你可以把代码贴出来吗？你可以看一下，我的这个代码，不知道是不是你想要的效果啊。

<!DOCTYPE HTML>

<html>

<head>

<title>Tab切换</title>

<style>

*{margin:0padding:0}

#box{width:450pxmargin:20px auto}

input{width:120pxborder:1px solid black}

.contents{width:450pxheight:100pxborder:1px solid blackdisplay:none}

</style>

<script>

window.onload=function()

{

var box=document.getElementById('box') //这里要获取box,是为了下面选择DOM元素时，减少寻找范围，提高速度，也就提高性能了

aBtn=box.getElementsByTagName('input'),

aCont=box.getElementsByTagName('div') //生明多个变量时，尽量用一个var

/*

下面是处理程序，原理是为每个按钮添加一个onclick事件，监听哪个按钮触发了，就触发哪个处理程序

*/

for(var i=0i<aBtn.lengthi++)

{

aBtn[i].index=i

aBtn[i].onclick=function()

{

//onclick时，先要把三个DIV全隐藏起来

for(var j=0j<aCont.lengthj++)

{

aCont[j].style.display='none'

}

//然后再让目标DIV显示出来

aCont[this.index].style.display='block'

}

}

}

</script>

</head>

<div id="box">

<input type="button" value="按钮1" />

<input type="button" value="按钮1" />

<input type="button" value="按钮1" />

<div class="contents" style="display:block">内容一</div>

<div class="contents" >内容二</div>

<div class="contents" >内容三</div>

</div>

</html>

function(data) {

// 提示信息

$("#operate_msg").text(data.message)

$("#operate_result_info").show()

// 等待2S，关闭提示信息

setTimeout(function(){

$("#operate_result_info").hide()

}, 2000)

}

不明白先采纳再追问

其实，这样的功能根本就用不着js代码，其实，用CSS就OK了！而且通用性好！

但如果你要的话，那写写给你也无妨！

以下代码：

js自动给菜单和内容的鼠标移动事件，

在HTML里没有鼠标移动的代码设置，所以，通用性好！

在菜单和内容里设置了相对应的顺序，就能直接支持！

你要改样式，只要改：#mNav .mover（移动事件）

和 #mNav .mout（离开后的样式）

<html>

<head>

<style>

#mNav {border:1px #afafffdisplay:blockwidth:600px}

#mNav li{display:inlinecursor:handwidth:100pxtext-align:centercolor:ffffff}

#mNav .mover{ background:#556ed8border:#efefff 3px outset}

#mNav .mout, #mNav li{ background:#335ea8border:#efefff 3px inset}

#mItems {border:1px #afafffwidth:600pxheight:500pxbackground:#e2efff}

#mItems div{display:none}

</style>

<script>

function initNavMenu()

{

var _mNav = document.getElementById("mNav")

for(var i=0 i <_mNav.childNodes.length i++ )

{

_mNav.childNodes[i].name=i

_mNav.childNodes[i].onmouseover=function()

{

var index= parseInt( this.name )

var _mNavs = document.getElementById("mNav")

for(var j=0 j <_mNavs.childNodes.length j++ )

_mNavs.childNodes[j].className="mout"

this.className="mover"

var _mItems = document.getElementById("mItems").childNodes

for( j=0j<_mItems.length j++)

_mItems[j].style.display="none"

_mItems[ index ].style.display="block"

}

}

document.getElementById("mItems").childNodes[0].style.display="block"

document.getElementById("mNav").childNodes[0].className="mover"

}

window.onload = function()

{

initNavMenu()//初始化菜单导航函数

}

</script>

</head>

<!--------------body ------------->

<body>

<ul id=mNav>

<li>政治</li>

<li>娱乐</li>

<li>经济</li>

<li>文化</li>

</ul>

<div id=mItems >

<div>--政治--内容---</div>

<div>--娱乐--内容---</div>

<div>--经济--内容---</div>

<div>--文化--内容---</div>

</div>

</body>

</html>