jQuery adding and removing classes dynamically when the user clicked

Question

I've a problem with the following code. I've two tabs in my navigation Tab-1 & Tab-2, when the user click on any tab, then I want to add the active class to it and at the same time I want to remove the active class from previously active tab. Also the tab which is currently active should display its content and have to hide the remaining content. It means when the user clicked on any tab it should display only its content and the other contents should be hidden. Please help me thank you.

<style>
    .wrapper .tabs {
        display: none;
    }
    .wrapper .tabs.active {
        display: block;
    }
</style>

<div class="wrapper">

    <!-- Navigation -->
    <ul class="nav">
        <li class="active"><a href="#tab-1">Tab-1</a></li>
        <li><a href="#tab-2">Tab-2</a></li>
    </ul>

    <!-- Panel-1 -->
    <div id="tab-1" class="tabs active">
        <p>Tab-1 Content</p>
    </div>

    <!-- Panel-2 -->
    <div id="tab-2" class="tabs">
        <p>Tab-2 Content</p>
    </div>

</div>

<!-- Script -->
<script>
    $(document).ready(function () {
        $('.nav li').click(function() {
            $('.nav li.active').removeClass('active');
            $(this).addClass('active');
        });

        // To display content for active class only
        $('.nav li').click(function() {
            $('.wrapper .tabs.active').removeClass('active');
            $(this).addClass('active');
        });
    });
</script>

guest271314 · Accepted Answer · 2016-08-20 02:21:46Z

2

You can use .eq(), .index() at click event attached to selector "a[href^='#tab-']" which selects element where href begins with #tab-, create variable referencing elements where id begins with tab-, call event.preventDefault() within click function to prevent navigation to document fragment, .hide(), .show()

   $(document).ready(function() {
     var a = $("a[href^='#tab-']");
     var tabs = $("[id^=tab]");
     a.click(function(e) {
       e.preventDefault();
       tabs.hide().eq(a.index(this)).show()
     })
   })

#tab-1 {
  display: block;
}
[id^="tab"]:not(#tab-1) {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js">
</script>
<div class="wrapper">
  <!-- Navigation -->
  <ul class="nav">
    <li>
      <a href="#tab-1">Tab-1</a>
    </li>
    <li>
      <a href="#tab-2">Tab-2</a>
    </li>
  </ul>
  <!-- Panel-1 -->
  <div id="tab-1" class="tabs active">
    <p>Tab-1 Content</p>
  </div>
  <!-- Panel-2 -->
  <div id="tab-2" class="tabs">
    <p>Tab-2 Content</p>
  </div>
</div>

answered Aug 20, 2016 at 2:21

guest271314

1

Sign up to request clarification or add additional context in comments.

6 Comments

Naresh Over a year ago

Thank you! I've one more doubt, what if I've different href values instead of tab-1, tab-2, something like home, gallery..

guest271314 Over a year ago

@e-Designary "what if I've different href values instead of tab-1, tab-2, something like home, gallery" Does not appear at original Question?

Naresh Over a year ago

It is not provided in the original question, but my doubt is if I've the nav like this, will it work? <ul class="nav"> <li> <a href="#home">Home</a> </li> <li> <a href="#gallery">Gallery</a> </li> </ul>

guest271314 Over a year ago

@e-Designary "It is not provided in the original question" How can an Answer be provided if description of details is not included at Question? "but if I've the nav like this <ul class="nav"> <li> <a href="#tab-1">Tab-1</a> </li> <li> <a href="#tab-2">Tab-2</a> </li> </ul>" That is same html as is at Question?

Naresh Over a year ago

@guest271314 Like this, <ul class="nav"> <li> <a href="#home">Home</a> </li> <li> <a href="#gallery">Gallery</a> </li> </ul>

|

Collectives™ on Stack Overflow

jQuery adding and removing classes dynamically when the user clicked

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related