仅选择集中的一个按钮

Question

我已经浏览了多个响应和教程，但似乎仍然遇到问题。如果有人能帮助我，将不胜感激。

$('.tablink').click(function(e){
$('.tablink').removeClass('active' );
$(this).addClass('active');
});

以上是我尝试用来将"active"类应用于单击的任何按钮的 javascript。我在下面提供了按钮本身。

<button class="tablink" onclick="openCity('News', this, '#0c0c0c')" id="defaultOpen">
<strong>News</strong>                                                                          
</button>
<button class="tablink" onclick="openCity('Story', this, '#0c0c0c')">
<strong>Events</strong>                                                                           
</button>
<button class="tablink" onclick="openCity('Guides', this, '#0c0c0c')">
<strong>Guides</strong>                                                                                     
</button>

如果您需要其他任何内容，我可以添加更多内容，但我的目的是让第一个按钮("新闻"按钮(默认具有活动类，直到单击另一个按钮，在这种情况下，我希望单击的按钮成为活动按钮，所有其他按钮都会丢失活动类。

提前非常感谢！

编辑：好的，所以这应该有效，但无论出于何种原因，它都不是。我在下面提供了一个链接以获得进一步的帮助： http://lorecraft.forumotion.com/

在左上角的侧边栏上，即使单击其他选项卡，它也会使第一个选项卡保持活动状态。我添加了适用于所有页面的 javascript 代码，并将第一个按钮指定为活动状态。还是没有骰子。

Answer 1

这里最简单的解决方案是根本不使用按钮，而是使用单选按钮(将被隐藏(，因为它们提供了相互排斥性，并label

元素的样式将看起来像按钮。不需要JavaScript。

input[type='radio'][name='buttonGroup'] { display:none; }
label {
display:inline-block;
padding:3px;
border:1px solid #e0e0e0;
border-radius:3px;
background-color:#F0F0F0;
width:10em;
text-align:center;
}
/* Clicking a label will select its corresponding hidden radio button
We can select that radio buttons sibling label and style it. */
input[type='radio'][name='buttonGroup']:checked + label { background-color:#a0a0a0; }

<input type="radio" name="buttonGroup" value="one" id="one"><label for="one">News</label>
<input type="radio" name="buttonGroup" value="two" id="two"><label for="two">Events</label>
<input type="radio" name="buttonGroup" value="three" id="three"><label for="three">Guides</label>

Answer 2

你的代码有效，有什么问题？

$('.tablink').click(function(e) {
$('.tablink').removeClass('active');
$(this).addClass('active');
});

.active {
background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="tablink active" onclick="return" id="defaultOpen" type="button">
<strong>News</strong>                                                                          
</button>
<button class="tablink" onclick="return" type="button">
<strong>Events</strong>                                                                           
</button>
<button class="tablink" onclick="return" type="button">
<strong>Guides</strong>                                                                                     
</button>

确保添加type="button"，否则如果您的按钮位于form元素内，单击该按钮将提交表单。(默认按钮type为submit(。

Answer 3

$('.tablink').on('click',function(){
$('.tablink').removeClass("active");
$(this).addClass("active");
});

和 将活动类放入

<button class="tablink active" onclick="openCity('News', this, '#0c0c0c')" id="defaultOpen">
         <strong>News</strong>                                                                          
</button>