jquery怎么实现导航点击了相应部分变背景

本帖最后由 lucyke 于 2013-04-08 23:48:02 编辑

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

$(this).addClass("current");这里的this指向的是a标签，你只是改变了a标签的样式而已。
我猜测你的菜单容器应该是li吧。
用这段代码：$(this).parent().addClass("current");
先removeClass（）   然后再 addClass（）
<script>
function addCss() {

    $(this).css("color","red");
    alert("addCss");

}function removeCss() {
$(this).css("color","black");
alert("removeCss");
}$(function() {$("#click").toggle(addCss,removeCss);});
</script>
<input id="click" type="button" value="click"></input>
我就是想做成如这个页面的效果 http://download.csdn.net/  比如点上面的排行榜打开的页面排行榜上面就变换这个要怎么做
你需要的是用js存取cookie，标记当前点击导航的值，然后根据这个值在页面渲染后设置相应的导航背景。
//JS操作cookies方法!//写cookiesfunction setCookie(name,value)
{
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
    var strsec = getsec(time);
    var exp = new Date();
    exp.setTime(exp.getTime() + strsec*1);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}//读取cookies
function getCookie(name)
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

    if(arr=document.cookie.match(reg))

        return (arr[2]);
    else
        return null;
}//删除cookies
function delCookie(name)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null)
        document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
//使用示例
setCookie("name","hayden");
alert(getCookie("name"));
<!DOCTYPE html>
<html>
<head>
<style>
body { margin:0; padding:0; font-size:12px; line-height:22px; background:#fff; }
.clearfix:after { content:' '; display:block; clear:both; height:0; font-size:0; visibility:hidden; }
.clearfix { *zoom:1; }
.wrap { width:960px; margin:0 auto; }
ul,li { margin:0; padding:0; }
ul { list-style:none; background:url(images/lj.gif); }
ul li { float:left; font-size:14px; line-height:39px; background:url(images/ceshi.gif) left center no-repeat; position:relative; }
ul li.last { float:right; }
ul li a { display:block; text-decoration:none; width:80px; padding:0 10px; }
ul li.last a { background:url(images/ceshi.gif) right center no-repeat; }
#content { border:1px solid #a7d7f9; }
.line { width:99px; background:#fff; height:1px; overflow:hidden; display:none; position:absolute; left:1px; }
ul li.last .line { width:98px; }
ul li.center a { background:url(images/ceshi.gif) right center no-repeat; }
#content_2,#content_3,#content_4 { display:none;}
#header ul li.current .line { display:block; }
#header ul li.current { background-color:#fff; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var lis = $('#header ul li');
lis.click(function() {
$('#header ul li').removeClass('current');
$(this).addClass('current');
$('#content').children().css('display', 'none');
$('#content_' + (parseInt($(this).index()) + 1)).css('display', 'block');
});
});
</script>
</head>
<body>
<div id="container" class="wrap">
<div id="header">
     <ul class="clearfix">
         <li class="current"><a href="#">中国</a>
             <div class="line"></div>
            </li>
            <li><a href="#">中国生活</a>
             <div class="line"></div>
            </li>
            <li><a href="#">中国</a>
             <div class="line"></div>
            </li>
            <li class="center"><a href="#">中国</a>
             <div class="line"></div>
            </li>
            <li class="last"><a href="#">中国</a>
             <div class="line"></div>
            </li>
        </ul>
    </div>

    <div id="content">
     <div id="content_1">fdfdf</div>
        <div id="content_2">fff</div>
        <div id="content_3">ggggggggg</div>
        <div id="content_4">hhhh</div>
    </div>
</div></body>
</html>