How to add/remove class from div trought Javascript?

Question

Currently this script adds active class to <a> but I want it to be added to <div> that is child of <a> I'm not good at Javascript, but I need this thing to get sorted.

  $('ul.tabs').each(function(){
    // For each set of tabs, we want to keep track of
    // which tab is active and it's associated content
    var $active, $content, $links = $(this).find('a');

    // If the location.hash matches one of the links, use that as the active tab.
    // If no match is found, use the first link as the initial active tab.
    $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
    $active.addClass('active');

    $content = $($active[0].hash);

    // Hide the remaining content
    $links.not($active).each(function () {
      $(this.hash).hide();
    });

    // Bind the click event handler
    $(this).on('click', 'a', function(e){
      // Make the old tab inactive.
      $active.removeClass('active');
      $content.hide();

      // Update the variables with the new link and content
      $active = $(this);
      $content = $(this.hash);

      // Make the tab active.
      $active.addClass('active');
      $content.show();

      // Prevent the anchor's default click action
      e.preventDefault();
    });
  });

Script wasn't made by me. http://www.jacklmoore.com/notes/jquery-tabs/

This may help you [change an elements class with javascript](http://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript). — viks, Oct 12 '15 at 12:43
by default the properties of a class will be inherited to its child elements, so you dont need to explicitly add the same properties to the child elements unless there its conflicting with other properties — dreamweiver, Oct 12 '15 at 12:50
It would probably be easier to answer this question if we understood WHY you wish to use the DIV's to track the active state. The JQuery script is designed to work with the

Pragatheeswaran · Answer 1 · 2015-10-13T03:58:52.740

1

You can use the jquery's parent() method. For example to list the 'div' elements whose parents are 'a' you can use,

$('div').parent('a');

So you can use

$('div').parent('a').click(function(){
  $(this).addClass('active');
});

edited Oct 13 '15 at 03:58

answered Oct 12 '15 at 12:49

Pragatheeswaran

120
1
9

Uncaught TypeError: $(...).parent(...).onclick is not a function – user3302325 Oct 12 '15 at 13:21

score 0 · Answer 2 · answered Oct 12 '15 at 12:46

<div id='tab1' class="active">
    <p>Hi, this is the first tab.</p>
  </div>
  <div id='tab2'>
    <p>This is the 2nd tab.</p>
  </div>
  <div id='tab3'>
    <p>And this is the 3rd tab.</p>
  </div>

css

.active{
display:block;
}
#tab1,#tab2,#tab3{
display:none;
}

Benneb10 · Answer 3 · 2015-10-12T13:13:13.583

I would use a case switch statement basically give each tab an id and try this. Sorry it isn't styles very well and could not get the Javascript section to work. http://jsfiddle.net/fvj92bbd/6/

<body>
<div id="tab1" class="whiteBackground" onclick="tab(1);">Tab</div>
<div id="tab1Content" style="display:block">This is content for tab 1</div>
<div id="tab2" class="woodBackground" onclick="tab(2);">Tab</div>
<div id="tab2Content" style="display:none">This is content for tab 2</div>
<div id="tab3" class="woodBackground" onclick="tab(3);">Tab</div>
<div id="tab3Content" style="display:none">This is content for tab 3</div>
<body>

function tab(mode){
// default for those not in case
document.getElementById("tab1").className = "woodBackground";
document.getElementById("tab1Content").style.display = "none";
document.getElementById("tab2").className = "woodBackground";
document.getElementById("tab2Content").style.display = "none";
document.getElementById("tab3").className = "woodBackground";
document.getElementById("tab3Content").style.display = "none";

switch(mode){
    case 1: document.getElementById("tab1").className = "whiteBackground";
            document.getElementById("tab1Content").style.display = "block";
    break;
    case 2: document.getElementById("tab2").className = "whiteBackground";
            document.getElementById("tab2Content").style.display = "block";
    break;
    case 3: document.getElementById("tab3").className = "whiteBackground";
            document.getElementById("tab3Content").style.display = "block";
    break;   
    default:
        return;     
    }
}

score 0 · Answer 4 · answered Oct 12 '15 at 13:21

0

try this :

$('a > div').click(function(){
  $(this).addClass('active');
});

answered Oct 12 '15 at 13:21

Amar Singh

5,464
2
26
55

How to add/remove class from div trought Javascript?

4 Answers4