[英]jQuery - adding and removing classes
I'm trying to make it so that there is a default tab, and when another is clicked, it takes the class off of that tab and onto the one that is clicked. 我正在尝试使其具有默认选项卡,并且在单击另一个选项卡时,它将使该类脱离该选项卡并进入被单击的选项卡。
Here's the HTML that I have: 这是我拥有的HTML:
<div id="rightWrap">
<div id="headStep"><span class="titleSub">Workers</span></div>
<center>
<br>
<a href="../about/?s=architect"><table class="highlight">
</table></a>
<br>
<a href="../about/?s=broker"><table class="">
</table></a>
<br>
<a href="../about/?s=operator"><table class="">
</table></a>
<br>
<a href="../about/?s=consultant"><table class="">
</table></a>
</center>
</div>
And the JavaScript: 和JavaScript:
$(document).ready(function() {
$('#rightWrap a table').click(function(){
$(this).addClass('highlight').siblings().removeClass('highlight');
});
});
Your tables are not siblings. 您的表不是兄弟姐妹。
$(document).ready(function() {
$('#rightWrap a table').click(function(){
var $this = $(this);
$this.parent().siblings('a').find('table').removeClass('highlight');
$this.addClass('highlight');
});
});
Note that if the doctype of the page is not HTML5, wrapping the tables with <a>
elements makes your document invalid. 请注意,如果页面的文档类型不是HTML5,则用<a>
元素包装表格会使文档无效。
I think you can simplify it to this; 我认为您可以简化为这一点;
$(document).ready(function() {
$('#rightWrap a table').click(function(){
$('#rightWrap').find('.highlight').removeClass('highlight');
$(this).addClass('highlight');
});
});
Your HTML also needs some serious work. 您的HTML也需要认真的工作。 Why the empty tables? 为什么是空表?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.