网页导航栏点击背景色更替-JavaSript-爱易网页

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

日期：2014-05-16　浏览次数：20548 次

网页导航栏点击背景色更换
现在有个导航栏，当我点击首页时，首页的背景色变成白色，其它保持原来颜色，点击关于我们时，关于我们的颜色变，其它不变，这种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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>