Question

在我的网站上，我尝试给导航栏添加更多样式，当菜单项悬停在背景颜色变化上时，我想要做的就是当它被点击/选中时我想要背景颜色保持不变直到另一个菜单项被点击/选中。

我已经在这个网站上尝试了几个类似查询的例子，但我只能部分工作。它仅在href="#"时有效，但当我用href="homepage.html"替换它时，菜单项的背景颜色将不会停留并将更改回来。

作为单个页面，它可以正常工作，但是当我为每个项目创建页面时，它不再有效。

    <style type="text/css">

#navigation a:hover  {background:#5B000C; color:#ffffff;} 
#navigation{ float:left; background-color:#000099; width:600px; height:25px; }
.item { width:600px; padding:0; margin:0; list-style-type:none; }
a { display:block; width:60PX; line-height:25px;/*24px*/ border-bottom:1px none #808080; font-family:'arial narrow',sans-serif; color:#FFF; padding: 0px; text-align:center; text-decoration:none; margin-bottom:0em; }                      
a.item { float:left;/* For horizontal left to right display. */ width:100px;/* For maintaining equal  */ margin-right:0px;/* space between two boxes. */ }                      
a.selected { background:#5B000C; color:white; }

   </style>         
</head>
<body>  
        <div id="navigation">   
            <a class="item" href="#" >HOME</a>
            <a class="item" href="#" >SUITE</a>
            <a class="item" href="#" >TEAM</a>
            <a class="item" href="#" >LOCATION</a>
            <a class="item" href="#" >CONTACT</a>
            <a class="item" href="#" >MAP</a>
        </div> 
         <script>
        var anchorArr=document.getElementsByTagName("a");
        var prevA="";
        for(var i=0;i<anchorArr.length;i++)
        {
            anchorArr[i].onclick = function(){
                if(prevA!="" && prevA!=this)
                {
                    prevA.className="item";
                }
                this.className="item selected";
                prevA=this;
            }
        }
       </script>

Answer 1

好吧，您在设置href时重新加载页面，因此它会返回默认样式。您需要找到一种方法在页面加载时将selected类添加到适当的菜单项。

...或者您可以执行this

之类的操作

菜单导航栏更改突出显示的颜色，并在用户访问同一页面时保留

1 个答案: