Question

我查看了多个回复和教程，但似乎仍然遇到了麻烦。如果有人能帮助我，我们将不胜感激。

以上是我试图用来应用“活跃”的javascript。类到任何一个按钮被点击。我在下面提供了按钮。

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

如果您还需要其他内容，我可以添加更多内容，但我的目的是让第一个按钮（＆＃39;新闻＆＃39;按钮）默认拥有活动类，直到另一个按钮被点击，其中case我希望单击的按钮成为活动的按钮，而其他所有按钮将失去活动的类。

提前非常感谢你！

编辑：好的，所以这应该有效，但无论出于何种原因，它都不是。我已在下面提供了一个链接以获得进一步的帮助： 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");
});

和将活动课程放在

中

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

Answer 3

这里最简单的解决方案是不使用按钮，而是使用单选按钮（将被隐藏），因为它们提供了相互排他性和label元素，这些元素将被设计为看起来像按钮。 / p>

不需要JavaScript。

＆＃13;

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; }

＆＃13;

<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>

＆＃13;

仅选择一组中的一个按钮

3 个答案: