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

Posted 2023-03-19

参考技术A 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>