jquery如何实现导航点击了相应部分变背景

jquery怎么实现导航点击了相应部分变背景本帖最后由 lucyke 于 2013-04-08 23:48:02 编辑求助想导航条点击

jquery怎么实现导航点击了相应部分变背景
本帖最后由 lucyke 于 2013-04-08 23:48:02 编辑求助想导航条点击了那么相应菜单变换背景或者变色，怎么实现？
$(".menu ul li a").click(function(){
$(this).addClass("current");
});
这样写怎么无效啊
[解决办法]
$(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>

[解决办法]


//JS操作cookies方法!

//写cookies

function 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>