MyException - 我的异常网
当前位置:我的异常网» JavaScript » 鼠标点符号击 切换li样式

鼠标点符号击 切换li样式

www.MyException.Cn  网友分享于:2013-01-10  浏览:16次
鼠标点击 切换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就可以了

文章评论

软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有