jQuery addClass example

Change class name on click in jQuery

by Kelly Hawker

HTML

<div class="mainCon">



  <a class="expand news-link" data-target="t10"><span></span>NEWS</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 TWO</div>
    <div id="tab08-3" class="tab-content eaCon08">CONTENT THREE</div>
    <div id="tab08-4" class="tab-content eaCon08">CONTENT FOUR</div>

  </div>
  <hr />

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

CSS

.tab-content {
  position: absolute;
  top: -9999px;
  left: -9999px;
  border: solid 1px #000;
  padding: 10px;
}

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

a.expand {
  background: red;
  color: #fff;
  padding: 5px 20px;
}

a.expand.disable {
  background: #333;
}

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();
  $(".mainCon").find(".news-link").addClass('disable');
}


$('.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();
  $(".mainCon").find('.event-link').addClass('disable');
}