                        课程
                    
                        /前端开发
                        
                            /jQuery
                        
                        /jQuery基础课程

JQuery有一个hasClass属性，我想实现鼠标点击增加样式怎么写？

这种效果一般用在网站导航上面，比如有首页，关于我们，联系我们三个链接，默认首页是选中状态，点击关于我们原本在首页下面的下划线消失并且关于我们下面出现下划线，这种效果怎么实现？请具体点，请忽略底下的代码误操作

戴眼镜的粉红兔子

2015-10-26

源自：jQuery基础课程 6-4

关注问题我要回答

532

操作

收起

2 回答

Y_du 回答被采纳 +3 积分
2015-10-26

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>toggle()方法绑定多个函数</title>
        <script src="http://libs.baidu.com/jquery/1.8.2/jquery.js" type="text/javascript"></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <style>
        li {
            width: 280px;
            float: left;
            margin: 0 10px;
        }
        .action {
            background-color: red;    
        }
    </style>
    <body>
        <ul>
            <li class="action">首页</li>
            <li>关于我们</li>
            <li>联系我们</li>
        </ul>
        
        <script type="text/javascript">
            $(function () {
                $('li').bind('click', function(){
                    var li = $('li');
                    for(var i = 0; i< li.length; i ++){
                        li[i].className = "";
                    }
                    this.className = "action"
                })
            });
        </script>
    </body>
</html>

类似这样，你只要写你的css代码就好了。