首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

网页导航栏点击背景色更替

2012-09-02 
网页导航栏点击背景色更换现在有个导航栏,当我点击首页时,首页的背景色变成白色,其它保持原来颜色,点击关

网页导航栏点击背景色更换
现在有个导航栏,当我点击首页时,首页的背景色变成白色,其它保持原来颜色,点击关于我们时,关于我们的颜色变,其它不变,这种JS怎么写

[解决办法]
给每个导航栏都设个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来,简单写了一个,自己改改吧:

HTML code
<!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> 

热点排行
Bad Request.