鼠标点击切换li样式

努力的老孙 2012-12-08 11:15:01

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

基础代码为上，我想实现，点击注意事项，‘注意事项’的样式就变为 ndj ；鼠标离开'注意事项'，样式变为'wdj'；同样，点击违章查询，样式变为 ndj ，鼠标离开，变为 wdj

...全文

306 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

86y 2012-12-08

打赏
举报

建议你看下面文章应该就好理解： js隔行、指向变色闭包使用实例

努力的老孙 2012-12-08

打赏
举报

引用 1 楼 xzy21com 的回复:

JavaScript code?12345$("li").click(function(){ $(this).attr("class","ndj");}).mouseout(function(){ $(this).attr("class","wdj");})

<script language="javascript">
$("li").click(function(){
  $(this).attr("class","ndj");
}).mouseout(function(){
  $(this).attr("class","wdj");
})</script>
<style>
/*切换按钮*/
li{ display:inline}
.ndj{ background:#000}
.wdj{ background:#FFF}

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

不行呢，，

scscms太阳光 2012-12-08

打赏
举报

$("li").click(function(){
  $(this).attr("class","ndj");
}).mouseout(function(){
  $(this).attr("class","wdj");
})

小疯疯008 2012-12-08

打赏
举报


<!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就可以了

小疯疯008 2012-12-08

打赏
举报


<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