首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

鼠标点符号击 切换li样式

2013-01-09 
鼠标点击 切换li样式li ahref# 违章查询/a/li li ahref# 注意事项/a/li基础代码为

鼠标点击 切换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就可以了

热点排行