在一组中只选择一个按钮

Question

我已经查看了多个回复和教程，但似乎仍然无法解决这个问题。如果有人能帮助我，将不胜感激。

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

以上是我试图用来将 'active' class 应用于单击的任何按钮的 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>

如果您需要其他任何东西，我可以添加更多，但我的目的是让第一个按钮（'News' 按钮）默认处于活动状态 class，直到单击另一个按钮，在这种情况下，我希望单击的按钮成为活动按钮，而所有其他按钮都失去活动按钮 class.

在此先感谢您！

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

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

Answer 1

您的代码有效，问题是什么？

$('.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 2

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

和将活动 class 放入

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

Answer 3

这里最简单的解决方案是根本不使用按钮，而是使用单选按钮（将被隐藏），因为它们提供互斥性和 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>

在一组中只选择一个按钮

Selecting Only One Button in a Set

javascript

button

selected