js控制div显示与隐藏,js利用"hover"属性

1.首先样式要设定好，在每个li区域只能显示a或者b。

2.引入js库代码（jquery库需要引用，1.4版本以上都可以）

3.设定外部ul的id属性：假设为ullist

4.编写js代码

下面是我写的一个例子代码，供你参考，jquery库需要自己下载并引用

<ul

id="ullist">

<li>

<div

class="a">A面内容</div>

<div

class="b">B面内容</div>

</li>

<li>

<div

class="a">A面内容</div>

<div

class="b">B面内容</div>

</li>

</ul>

<style

type="text/css">

#ullist

{

overflow:

hidden

}

#ullist

li

{

height:

30px

width:

100px

overflow:

hidden

line-height:

30px

}

#ullist

.a

{

width:

30px

width:

100px

display:

block

}

#ullist

.b

{

width:

30px

width:

100px

display:

none

}

</style>

<script

type="text/javascript">

$(function

()

{

$('#ullist

li').hover(

function

()

{

$('.a',

this).hide()

$('.b',

this).show()

},

function

()

{

$('.b',

this).hide()

$('.a',

this).show()

}

)

})

</script>

一般都用jQuery写：简单方便。

$(selector).hover(handlerInOut) 。

等同于：$( selector ).on( "mouseover mouseout", handlerInOut )

就可以触发鼠标放上去的事件。

js写导航栏hover效果每个js定时器产生时会被系统分配一个id，这个id是正整数，而且一个页面里面的定时器id不重复，我们能用一个变量接收这个id，但是如果重复执行一条接收创建语句，那么你只能接收到最新创建的定时器的id，之前创建的定时器的id会被覆盖，但是定时器数量在增加，这就会导致界面一些功能错乱，解决方法就是在重复按开始按钮时，如果已经有了一个定时器那么就不执行语句，我列出了错误代码和三种解决方法，可以解决定时器重复创建问题。

---