这是我的菜单的 html：
<ul class="nav">
<li><a href="#a" class="active">A</a></li>
<li><a href="#b" >B</a></li>
<li><a href="#c" >C</a></li>
<li><a href="#d" >D</a></li>
</ul>
我希望，在我点击菜单中的链接后，活动类将添加到点击的<li>。
提前致谢
【问题讨论】：
标签： javascript html css
使用 jquery
$("li a").click(function() {
$('li a').not(this).removeClass('active');
$(this).toggleClass('active');
});
【讨论】：
他并不是要一个 jQuery 解决方案。但是 jQuery 将是理想的选择，这里是如何使用 javascript、最佳实践、事件委托和现代来做到这一点。也许有人也从中学到了一些新东西。
window.onload = function(){
(function(){
var els = [];
var doc = document;
var get = function(id){return doc.getElementById(id);};
get('clickable').onclick = function(evt){
evt = evt || window.event;
var el = evt.target || evt.srcElement;
els = doc.querySelectorAll('#clickable a');
if(el.nodeName == "A"){
for(var i = els.length - 1; i >= 0; i -= 1){
els[i].className = '';
};
el.className = 'active';
};
};
})();
};
【讨论】：
如果你使用 jQuery，那么你可以使用如下代码：
$(function () {
$(".nav a").click(function () {
$(".nav a").removeClass("active");
$(this).addClass("active");
});
});
【讨论】：
用 jQuery 试试这个
$('#nav li a').click(function(){
$('#nav li a').removeClass('active');
$(this).addClass('active');
});
【讨论】：
这是一个不使用 jquery 的原型，因为您没有就您的问题提出要求。 它使用活动类搜索当前元素，将其删除并将该类添加到单击的类中。
Javasript 函数
function activeThis(element){
var current = document.getElementsByClassName("active")[0];
current.className = null;
element.className="active";
}
HTML 代码
<a href="#b" onclick="activeThis(this)">
【讨论】：
我希望我得到了你想要的...我将 eventHandlers 添加到 <ul>。点击时从前一个元素中删除点击并设置点击类（如果当前类是活动的？？）
<ul class="nav">
<li><a href="#a" class="active">A</a></li>
<li><a href="#b">B</a></li>
<li><a href="#c">C</a></li>
<li><a href="#d">D</a></li>
</ul>
<script>
var clickedElem = null;
document.getElementsByClassName("nav")[0].addEventListener("click", function (e) {
if (clickedElem)
clickedElem.removeAttribute("class");
// check if e.srcElement.className is active?? that's what you want?
e.srcElement.className = "clicked";
clickedElem = e.srcElement;
});
</script>
【讨论】：
这个应该适合你
elems =document.getElementsByClassName("nav")[0].getElementsByTagName("a");
for (var i = 0; i < elems.length; i++) {
elems[i].addEventListener("click", function (e) {
for (var i = 0; i < elems.length; i++) {
elems[i].className="";
};
this.className = "active";
});
}
【讨论】：
我想这会奏效
var navlinks = document.getElementByClass('nav').getElementsByTagName('a');
for (var i = 0; i < navlinks.length; i++) {
if(navlinks[i].className == 'active'){
navlinks[i].parentNode.parentNode.parentNode.className = 'YOUR CLASS';
}
}
【讨论】：
检查我的小提琴
我希望这是你想要的
http://jsfiddle.net/arunberti/ftZzs/
a:visited
{
color:green;
}
a:active {color:yellow;}
a:link {color:red;}
【讨论】：
试试这个：
$('.nav li').click(function(e) {
$(this).addClass('selected').siblings().removeClass('selected');
});
或者，如果您想将click 事件附加到a：
$('.nav a').click(function(e) {
e.preventDefault();
$('.nav a').removeClass('selected');
$(this).addClass('selected');
});
【讨论】：
很简单
jQuery 代码：
$('.nav li a').on('click',function(){
$('.nav li').each(function() {
var anc=$(this).find('a');
if(anc.hasClass('active'))
{
$(anc).removeClass('active');
}
})
$(this).addClass('active');
})
已编辑： 代码精炼
快乐编码:)
【讨论】：