Question

当我点击HOME时，这是我的菜单我需要它在活动时更改背景颜色。我可以用css实现这个目标吗？或者我也有其他选择吗？

html代码：

<div id="menu"><br></div>
<div style="position: absolute;margin-top: -40px;">
<ul>

<li><a href="#">HOME</a></li>
<li><a href="#">SETTINGS</a></li>

</ul>
</div>

的CSS：

#menu {
       width:100%;
       height:40px;
       background-color: #AC58FA;
       opacity:0.5; 
       margin-top:75px; 
         }
ul {
    list-style: none;
    padding:0px;
    margin:0px;
    oveflow:hidden;
    }

li {
    float:left;
   }

a:link, a:visited{
                  display:block;
                  width:204px;
                  font-weight: bold;
                  color: #FFFFFF;
                  background-color: transparent;
                  text-align: center;
                  padding: 10px;
                  text-decoration: none;
                   }


a:hover, a:active {
                    background-color: black;
                  }

https://jsfiddle.net/nitinkolmi/xraobuxq/

Answer 1

基本上只有CSS才有可能因为你需要绑定一个事件，所以基于你必须动态改变活动菜单选项的css。

为此，您需要使用JS / Jquery绑定事件并处理事件..

Answer 2

就像你在hower上做的那样，你需要在onclick事件的帮助下为所点击的菜单项添加classname，并在css中添加相关的样式。

Answer 3

使用jQuery Working Demo

添加活动类

var selectLi = $('ul li a');
$(selectLi).click(function() {
   $('li a').removeClass('active');    
   $(this).addClass('active');    
})

Answer 4

您可以添加一个类：.menuHover{background-color:black;}

使用jQuery函数绑定菜单：

$("ul li a").hover(
    function(){
        $(this).addClass('menuHover');
    },
    function(){
        $(this).removeClass('menuHover');
    }
);

html导航菜单如何突出显示所选菜单

4 个答案: