jQuery addClass example

Change class name on click in jQuery

by Kelly Hawker

HTML

<a class="expand news-link" data-target="t10"><span></span></a>

<div class="toggles" data-target="t10">
  <ul class="newsBtns tabs tabsCon08">
    <li><label><input name="news" type="radio" data-tab="tab08-1" value="newsbg1" class="tab-link" checked="checked">Layout 1</label></li>
    <li><label><input name="news" type="radio" data-tab="tab08-2" value="newsbg2" class="tab-link">Layout 2</label></li>
    <li><label><input name="news" type="radio" data-tab="tab08-3" value="newsbg3" class="tab-link">Layout 3</label></li>
    <li><label><input name="news" type="radio" data-tab="tab08-4" value="newsbg4" class="tab-link">Layout 4</label></li>
    <li><label style="color:red;"><input name="news" type="radio" value="close" class="tab-link">Remove</label></li>
  </ul>
</div>


<div id="newsMainCont">

  <div id="tab08-1" class="tab-content eaCon08 current">CONTENT ONE</div>
  <div id="tab08-2" class="tab-content eaCon08">CONTENT ONE</div>
  <div id="tab08-3" class="tab-content eaCon08">CONTENT ONE</div>
  <div id="tab08-4" class="tab-content eaCon08">CONTENT ONE</div>

</div>


<a class="expand event-link" data-target="t11"><span></span>Events</a>

<div class="toggles" data-target="t11">
  <ul class="eventBtns tabs tabsCon09">
    <li><label><input name="event" type="radio" data-tab="tab09-1" value="eventbg1" class="tab-link" checked="checked">Layout 1</label></li>
    <li><label><input name="event" type="radio" data-tab="tab09-2" value="eventbg2" class="tab-link">Layout 2</label></li>
    <li><label><input name="event" type="radio" data-tab="tab09-3" value="eventbg3" class="tab-link">Layout 3</label></li>
    <li><label><input name="event" type="radio" data-tab="tab09-4" value="eventbg4" class="tab-link">Layout 4</label></li>
    <li><label style="color:red;"><input name="event" type="radio" value="close" class="tab-link">Remove</label></li>
  </ul>
</div>

<div id="eventMainCont">

  <div id="tab09-1" class="tab-content eaCon09 current">CONTENT ONE</div>
  <div...

CSS

.tab-content {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.tab-content.current {
  display: block;
  position: relative;
  top: 0;
  left: 0;
}

JavaScript

$('.newsBtns input[type="radio"]').click(function(e) {
  var tab_id = $(this).attr('data-tab');
  $('ul.tabsCon08 li').removeClass('current');
  $('.eaCon08').removeClass('current');
  $(this).addClass('current');
  $("#" + tab_id).addClass('current');
});
if ($("input[name=news]:checked").val("close")) {
  $("#newsMainCont").hide();
  $("#newsMainCont").show();
};


$('.eventBtns input[type="radio"]').click(function(e) {
  var tab_id = $(this).attr('data-tab');
  $('ul.tabsCon09 li').removeClass('current');
  $('.eaCon09').removeClass('current');
  $(this).addClass('current');
  $("#" + tab_id).addClass('current');
});
if ($("input[name=event]:checked").val("close")) {
  $("#eventMainCont").hide();
  $("#eventMainCont").show();
  $(this).find('.event-link').addClass('disable');
};