<分区>
标签 javascript jquery html css
<分区>
我正在尝试制作标签页切换功能。
HTML:
<span id="t1" class="location">Random</span>
<span id="t2" class="location">Text</span>
<span id="t3" class="location">TextText</span>
<span id="t4" class="location">Asdf</span>
<span id="t5" class="location">Fdsa</span>
<span id="t6" class="location">Asdf</span>
<span id="t7" class="location">Random</span>
CSS:
.selected {
border-bottom:1px solid blue;
color:blue;
}
.location {
border-right:1px solid black;
margin-left:8px;
padding-right:8px;
cursor:pointer;
}
Javascript:
$(document).ready(function(){
$("#t1").click(function(){switchTabs(1)});
$("#t2").click(function(){switchTabs(2)});
$("#t3").click(function(){switchTabs(3)});
$("#t4").click(function(){switchTabs(4)});
$("#t5").click(function(){switchTabs(5)});
$("#t6").click(function(){switchTabs(6)});
$("#t7").click(function(){switchTabs(7)});
});
var previousNumber;
function switchTabs(number) {
$("#t" + number).toggleClass('selected');
previousNumber = number;
$("#t" + previousNumber).toggleClass('selected');
}
当我点击任何 span 时，它不会执行任何操作。但是如果我做 $("#t1").toggleClass('selected') 它会起作用。我不知道我做错了什么。
最佳答案
首先，如果它们都具有相同的功能，则使用该类来绑定(bind)您的点击事件。
您可以使用 $(this) 在该函数中获取被点击的对象。您还可以在将“选定”类添加到单击的对象之前将其全部删除。
示例:
$('.location').click(function() {
$('.location').removeClass('selected')
$(this).addClass('selected');
}
关于javascript - .addClass() 无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22698780/