网页导航栏点击背景色更换 现在有个导航栏,当我点击首页时,首页的背景色变成白色,其它保持原来颜色,点击关于我们时,关于我们的颜色变,其它不变,这种JS怎么写 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 给每个导航栏都设个id 然后根据id去改变颜色啊juqery中有removeClass(移除样式)addClass(添加样式)先移除掉上一个id的颜色 然后给当前id设置你需要的颜色 不用页面,就在不用的页面中的body给个background啊。能用css就不用js了。 你这个导航栏中的 首页 关于我们 这些都都在一个div 中 而 这些又属于单个小的div那可以用jquery这样去写$("#导航栏Id div").click(function(){ $(this).addClass("带颜色的div样式").removeClass("不带颜色的div样式"); $(this).siblings().addClass("不带颜色的div样式").removeClass("带颜色的div样式");}) 你这用到单击事件了 肯定要涉及到js的 单纯的用css不能做出单击事件的效果 我还以为是页面背景色呢。如果单是这个链接的背景色的话就用 1#的方法吧,如果不知道jq,还可以用javascript来,简单写了一个,自己改改吧:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style> ul,li{padding:0;margin:0;list-style:none} #menu li{width:100px;background:#EEE;margin-right:1px;display:block;float:left;height:24px;line-height:24px;vertical-align:middle;text-align:center} #menu li:first-child{background:#CCC;} </style> <script> function MenuClick(obj){ var tag = document.getElementsByTagName("li") for (var i=0;i<tag.length;i++ ) { tag[i].style.background="#EEE" obj.style.background = "#ccc" } } </script> </head> <body> <ul id="menu"> <li onclick="MenuClick(this)">首页</li> <li onclick="MenuClick(this)">页面1</li> <li onclick="MenuClick(this)">页面2</li> <li onclick="MenuClick(this)">页面3</li> <ul> </body></html> 如果跳转到新页面的话,这段代码就相当于.hover类了,没有实际作用呢。如何能让它跳转到新页面的背景颜色改掉呢? web中ActiveX控件键盘事件问题 我的ExtJs中的工具栏怎么没有效果呢?? 我用js获得了对方的MAC地址,之后如何传给服务器? js 封装的问题 新手,一分都没有,但是程序代码问题要解决,请高手开恩 js控制图片大小问题~ 如何实现层里的链接?在线等?急! 请叫各路大俠,在点击radio后如何改变文本框的属性为只读,且文本框背景色变为灰色 在父窗口中关闭子窗口的问题 有谁有onmouseover时显示信息,判断是否显示超出屏幕上下位置的代码? js验证double类型 求这种js加密方法的网站
juqery中有removeClass(移除样式)
addClass(添加样式)
先移除掉上一个id的颜色 然后给当前id设置你需要的颜色
那可以用jquery这样去写$("#导航栏Id div").click(function(){
$(this).addClass("带颜色的div样式").removeClass("不带颜色的div样式");
$(this).siblings().addClass("不带颜色的div样式").removeClass("带颜色的div样式");
})
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
ul,li{padding:0;margin:0;list-style:none}
#menu li{width:100px;background:#EEE;margin-right:1px;display:block;float:left;height:24px;line-height:24px;vertical-align:middle;text-align:center}
#menu li:first-child{background:#CCC;}
</style>
<script>
function MenuClick(obj){
var tag = document.getElementsByTagName("li")
for (var i=0;i<tag.length;i++ )
{
tag[i].style.background="#EEE"
obj.style.background = "#ccc" }
}
</script>
</head> <body>
<ul id="menu">
<li onclick="MenuClick(this)">首页</li>
<li onclick="MenuClick(this)">页面1</li>
<li onclick="MenuClick(this)">页面2</li>
<li onclick="MenuClick(this)">页面3</li>
<ul>
</body>
</html>