jquery的css切换有关问题

2012-06-19

jquery的css切换问题？HTML codeul classnavleftlia href# classnow学员空间/aul class

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> 
 
[解决办法]
<%@ page language="java" pageEncoding="gbk"%>
<!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 language="javascript" src="http://localhost:8080/WEB/skin/new/js/jquery/jquery.pack.js" charset="gbk"></script>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>无标题文档</title>
<style>
.currCss {
background: blue;
font-weight: bold;
color: red;
}

.otherCss {
background: white;
color: black;
}
</style>
<script type="text/javascript">
   var selected = null;           
          function changeCss(element){
var cssCur = "currCss";
var cssOth = "otherCss";
if(!selected){selected = $(".currCss");}
var newO = $(element);
if (newO.attr("id") == selected.attr("id")){return;}
selected.attr("className", cssOth);
newO.attr("className", cssCur);
selected = newO;
  }
       </script>
</head>
<body>
<a href="#" class="otherCss" id="learnerId" onclick="changeCss(this);">学员空间</a>
<a href="#" id="guardianId" class="currCss" onclick="changeCss(this);">家长课堂</a>
<a href="#" id="shareId" class="otherCss" onclick="changeCss(this);">快乐分享</a>
</body>
</html>

热点排行

Ajax

jquery的css切换有关问题