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>

温馨提示：内容为网友见解，仅供参考

当前网址：https://11.t2y.org/zz/22p8228s42s2274m4p.html