CODEWITHSUNDEEP
javascriptbuttonselected
Oliver Tectus
Oliver Tectus

Reputation: 13

Selecting Only One Button in a Set

I've looked through multiple responses and tutorials, but still seem to having trouble with this. If anyone could help me out, it would be greatly appreciated.

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

The above is the javascript that I'm trying to use to apply the 'active' class to whichever button is clicked. I've provided the buttons themselves below.

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

If you need anything else from, I can add more, but my intention is for the first button (the 'News' button) to have the active class by default until another button is clicked, in which case I want the clicked button to become the active one and all others to lose the active class.

Thank you so much in advance!

Edit: Okay, so this should be working but for whatever reason it isn't. I've provided a link below for further assistance: http://lorecraft.forumotion.com/

In the top left, on the sidebar, it's keeping the first tab as active even when the other tabs are clicked. I've added the javascript code to apply to all pages and designated the first button as active. Still no dice.

Upvotes: 1

Views: 6337

Answers (3)

Scott Marcus
Scott Marcus

Reputation: 65808

The simplest solution here is not to use buttons at all, but instead to use radio buttons (which will be hidden) because they provide the mutual exclusivity and label elements that will be styled to look like buttons.

No JavaScript needed.

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>

Upvotes: 5

Bashar
Bashar

Reputation: 473

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

and put the active class in 

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

Upvotes: 0

connexo
connexo

Reputation: 56770

Your code works, what's the issue?

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

Make sure to add type="button", otherwise if your buttons sit inside a form element clicking the button will submit the form. (default button type is submit).

Upvotes: 0

Related Questions