我尝试在用户点击具有特定ID的li时添加特定类,我尝试在li点击之前删除所有其他类,并为此li添加特定类,例如用户点击在带有id 1的li中,asigned类是一个,如果用户在id中点击li,则class add为2并删除之前的class one等等。我的代码如下所示:
<ul class="menu-primary">
<li id="1"><a href="#">Index</a></li>
<li id="2" ><a href="#">Other</a></li>
<li id="3"><a href="#">Thats why</a></li>
<li id="4"><a id="3" href="#">Sports</a></li>
<li id="5"><a id="4" href="#">Clients</a></li>
<li id="6"><a id="5" href="#">Things about history</a></li>
<li id="7"><a href="#">Contact</a></li>
</ul>
jquery看起来像这样:
$(document).ready(function() {
if($('.menu-primary #1').hasClass('one')){
$('.menu-primary #1').removeClass('one')
}else{
$('.menu-primary #1').addClass('one')
}
if($('.menu-primary #2').hasClass('dos')){
$('.menu-primary #2').removeClass('dos')
}else{
$('.menu-primary #2').addClass('dos')
}
if($('.menu-primary #3').hasClass('three')){
$('.menu-primary #3').removeClass('three')
}else{
$('.menu-primary #3').addClass('three')
}
if($('.menu-primary #4').hasClass('four')){
$('.menu-primary #4').removeClass('four')
}else{
$('.menu-primary #4').addClass('four')
}
if($('.menu-primary #5').hasClass('five')){
$('.menu-primary #5').removeClass('five')
}else{
$('.menu-primary #5').addClass('five')
}
if($('.menu-primary #6').hasClass('six')){
$('.menu-primary #6').removeClass('six')
}else{
$('.menu-primary #6').addClass('six')
}
if($('.menu-primary #7').hasClass('seven')){
$('.menu-primary #7').removeClass('seven')
}else{
$('.menu-primary #7').addClass('seven')
}
});
感谢您的帮助。
答案 0 :(得分:2)
在我从li中删除属性Class并添加新类
之后,您需要在li上添加处理程序$('.menu-primary li').click(function(){
$('.menu-primary li').removeAttr("class");
if($(this).attr("id")=="1"){
$(this).addClass("one");
}
if($(this).attr("id")=="2"){
$(this).addClass("two");
}
if($(this).attr("id")=="3"){
$(this).addClass("three");
}
});
答案 1 :(得分:1)
我相信这就是你想要的,而不是硬编码if
语句只是尝试为标记中的元素添加data
并继续使用此代码。
var menu = $('.menu-primary li').click(function () {
menu.not($(this).toggleClass($(this).data("class"))).removeClass();
});
答案 2 :(得分:0)
以下是一个例子:
$("#my_id").addClass('active');
这是你需要的吗?
答案 3 :(得分:0)
在这个例子中你可以使用一些 vanilla javascript:
var nums = ['zero','one','two','three'];
$('.menu-primary li').click(function(){
if( nums[parseInt(this.id)].length ){ // verifies class exists
this.className = nums[parseInt(this.id)]; // completely overwrites class
}
});