当前位置: 代码迷 >> Ajax >> jquery的css切换有关问题
  详细解决方案

jquery的css切换有关问题

热度:210   发布时间:2012-06-19 14:45:20.0
jquery的css切换问题?
HTML code

          <ul class="navleft">
            <li><a href="#" class="now">学员空间</a>
                <ul class="now01">
                    <li><a href="#">成绩提升榜</a></li>
                    <li><a href="#">学员心得</a></li>
                    <li><a href="#">明星学员</a></li>
                </ul>
            </li>
            <li><a href="#">家长课堂</a></li>
            <li><a href="#">快乐分享</a><ul class="now01">
                    <li><a href="#">明星案例</a></li>
                    <li><a href="#">家长心声</a></li>
                    <li><a href="#">老师的成就与价值</a></li>
                </ul></li>
            </ul>


当我 点击【家长课堂】时,它的样式addClass("now"),而【快乐分享】和【学员空间】的class="now"得移除,jq代码该如何写?

------解决方案--------------------
$(".now").removeClass("now");
$(this).addClass("now");
------解决方案--------------------
问题已经解决,代码如下

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
    <head>
        <meta name="generator" content="HTML Tidy, see www.w3.org">
        <meta http-equiv="content-type" content= "text/html; charset=UTF-8">
        <title>array test</title>
        <style type="text/css">
            .now {
                background: blue;
                font-weight: bold;
                color: red;
            }
            
            .now01 {
            }
        </style>
        <script type="text/javascript" src="jquery-1.3.2.js">
        </script>
        <script type="text/javascript">
            $(function(){
                $('#guardianId').click(function(){
                    $(this).addClass('now');
                    $('#shareId').removeClass('now');
                    $('#learnerId').removeClass('now');
                });
            });
        </script>
    </head>
    <body>
        <ul class="navleft">
            <li>
                <a href="#" class="now" id="learnerId">学员空间</a>
                <ul class="now01">
                    <li>
                        <a href="#">成绩提升榜</a>
                    </li>
                    <li>
                        <a href="#">学员心得</a>
                    </li>
                    <li>
                        <a href="#">明星学员</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#" id="guardianId">家长课堂</a>
            </li>
            <li>
                <a href="#" id="shareId" class="now">快乐分享</a>
                <ul class="now01">
                    <li>
                        <a href="#">明星案例</a>
                    </li>
                    <li>
                        <a href="#">家长心声</a>
                    </li>
                    <li>
                        <a href="#">老师的成就与价值</a>
                    </li>
                </ul>
            </li>
        </ul>
    </body>
</html>
 
  相关解决方案