读书人

鼠标点符号击 切换li样式

发布时间: 2013-01-09 09:38:16 作者: rapoo

鼠标点击 切换li样式
<li ><a href="#" >违章查询</a></li>
<li ><a href="#" >注意事项</a></li>


基础代码为上,我想实现,点击 注意事项,‘注意事项’的样式就变为 ndj ; 鼠标离开'注意事项',样式变为'wdj';同样,点击违章查询,样式变为 ndj ,鼠标离开,变为 wdj
[解决办法]
建议你看下面文章应该就好理解:
js隔行、指向变色闭包使用实例

[解决办法]


<html>
<script type="text/javascript" src="/js/jquery-1.4.2.js" ></script>
<script language="javascript">
$("li").click(function(){
$(this).addClass("ndj");
}).mouseout(function(){
$(this).removeClass("ndj").addClass("ndj");
})</script>
<style>
/*切换按钮*/
li{ display:inline}
.ndj{ background:#000}
.wdj{ background:#FFF}

</style>
<li ><a href="#" >违章查询</a></li>
<li ><a href="#" >注意事项</a></li>
</html>

有时候感觉 attr 不好用,楼主要引入jquery的js

[解决办法]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("li").click(function () {
$(this).attr("class", "ndj");
}).mouseout(function () {
$(this).attr("class", "wdj");
})

})

</script>

<style type="text/css">
/*切换按钮*/
li{ display:inline}
.ndj{ background:#000}
.wdj{ background:#FFF}

</style>
</head>
<body>
<ul>
<li><a href="#" >违章查询</a></li>
<li><a href="#" >注意事项</a></li>
</ul>
</body>
</html>

刚试了一下, 这个可以,引入jQuery就可以了

读书人网 >JavaScript

热点推荐