jquery制作菜单效果，怎样实现颜色变化效果？
当我点击相应文字的时候，文字的背景变成绿色；当我点击其他文字的时候，以前点击的文字的背景编程白色，怎样实现呢？这是效果图下面是部分代码：<scriptsrc='./js/...
当我点击相应文字的时候，文字的背景变成绿色；当我点击其他文字的时候，以前点击的文字的背景编程白色，怎样实现呢？
这是效果图
下面是部分代码：
<script src='./js/jquery.js'></script>
<script>
$(document).ready(function(){
$(".news").click(function(){
$(this).css( "background", "green" );
});
});
</script>
<style>
#menu{
height:40px;
}
#menu ul li{
float:left;
padding:0 10px 0;
list-style:none;
}
</style>
<header>
</header>
<body>
<div id="menu">
<ul>
<li class='news'>新闻资讯</li>
<li class='news'>国足资讯</li>
<li class='news'>资讯</li>
<li class='news'>新闻资讯</li>
<li class='news'>新闻资讯</li>
</ul>
</div>
</body>
怎样使点击过的文字的背景颜色恢复成白色呢？ 展开
这是效果图
下面是部分代码：
<script src='./js/jquery.js'></script>
<script>
$(document).ready(function(){
$(".news").click(function(){
$(this).css( "background", "green" );
});
});
</script>
<style>
#menu{
height:40px;
}
#menu ul li{
float:left;
padding:0 10px 0;
list-style:none;
}
</style>
<header>
</header>
<body>
<div id="menu">
<ul>
<li class='news'>新闻资讯</li>
<li class='news'>国足资讯</li>
<li class='news'>资讯</li>
<li class='news'>新闻资讯</li>
<li class='news'>新闻资讯</li>
</ul>
</div>
</body>
怎样使点击过的文字的背景颜色恢复成白色呢？ 展开
展开全部
$(".news").css("background", "green").siblings(".news").css("background","white");
其中siblings(“.news”)代表的是：具有.news类的li标签的其他同辈元素。
一般这个最好放在hover里面，这样表现的就是鼠标移入就改变其背景色。
$(".news").hover(
function(){
$(this).css("background", "green").siblings(".news").css("background","white");
},function(){
$(this).css("background", "white");
});
上面siblings及其后面的代码可以不要，帮你补充一个知识点，就是获得本li标签的同辈标签。
其中siblings(“.news”)代表的是：具有.news类的li标签的其他同辈元素。
一般这个最好放在hover里面，这样表现的就是鼠标移入就改变其背景色。
$(".news").hover(
function(){
$(this).css("background", "green").siblings(".news").css("background","white");
},function(){
$(this).css("background", "white");
});
上面siblings及其后面的代码可以不要，帮你补充一个知识点，就是获得本li标签的同辈标签。
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
$(".news").click(function(){
$(".news").css("background","white");
$(this).css( "background", "green" );
});
$(".news").css("background","white");
$(this).css( "background", "green" );
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
.clicked li{
background:green;
}var news = $(".news");
news.click(function(){
// 取集合 先全部去掉点击class
news.removeClass("clicked")
// 只对当前点击添加class
$(this).addClass( "clicked" );
});
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
"background", "none"
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
