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>
这是表格高亮显示功能。hover一个模仿悬停事件。鼠标移动到一个对象上面及移出这个对象。的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种保持在其中的状态。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测,如果是,则会继续保持悬停状态,而不触发移出事件。
第一种各行换色,第二种鼠标移动到对应行,高亮显示。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)