html - 带有按钮的导航栏在单击时获得事件属性但在选择其他按钮时丢失它们

Question

所以我想要的是一个带有 6 个按钮的简单菜单。目标是当我们点击它们时按钮改变背景颜色，但当我们点击另一个按钮时颜色恢复到原始状态。我尝试使用一些事件类将属性与一些脚本一起添加到事件按钮(链接)，但它不起作用。菜单在一个框架中，内容在目标框架中(我不想将导航栏代码复制到每个页面)，这就是我使用“目标”的原因，但我认为这就是问题所在。

我希望有人能帮助我，因为我对此一窍不通，花了很多时间研究但没有成功。

HTML:

家
• 事件
• 成员
• 元素
• 出版物
• 联系人

CSS:

#menu1 ul {
float:left;
width:100%;
list-style-type:none;
padding:0;
margin:0;
}

#menu1 li {
display:inline;
text-align:center;
}

#menu1 a {
float:left;
width:120px;
padding:0 5px 0 5px;
}

#menu1 a:hover {
background-color:#eee;
}

#menu1 a:active {
background-color:#ddd;
}

#menu1 li.active {
background-color:#eee;
}

JS:

$(document).ready(function()
{$('ul.menu1 li a').click(function (e)
{$('ul.menu1 li.active').removeClass('active');
$(this).parent('li').addClass('active');
});          
});

Answer 1

你很接近。只是有些混淆类 vs id。我认为这可以满足您的需求:

HTML:

<ul id="menu1">
    <li><a href="#">Home</a></li>
    <li><a href="#">Activities</a></li>
    <li><a href="#">Members</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Publications</a></li>
    <li><a href="#">Contacts</a></li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

CSS:

#menu1 {
float:left;
width:100%;
list-style-type:none;
padding:0;
margin:0;
}

#menu1 li {
display:inline;
text-align:center;
}

#menu1 li a {
float:left;
width:120px;
padding:0 5px 0 5px;
}

#menu1 li a:hover {
background-color:#eee;
}

#menu1 li a:active {
background-color:#ddd;
}

#menu1 li a.active {
background-color:#eee;
}

JS:

$(document).ready(function(){
    $('#menu1 li a').click(function (e){
        e.preventDefault();
        console.log($('#menu1 li.active'));
        $('#menu1 li a.active').removeClass('active');
        console.log($(this));
        $(this).addClass('active');
        console.log('done');
    });         
});

https://jsfiddle.net/hopkins_matt/t4vykesg/