jQuery: very simple tab switching

jquery tabs activate
jquery tab click event
jquery tabs select
jquery tabs examples with source code
jquery tabs plugin
jquery tab event
jquery tabs load
jquery tabs get active tab

I'm trying to create a very simple tab switching mechanism using jQuery (it's for a WordPress plugin where all tabs show fields that must belong to the same form.)

My goal is: 1) the clicked tab gets highlighted as active; 2) the content referred to the clicked tab gets visible taking the place of the previously displayed content; 3) only the currently active content must be visible and only its tab must be highlighted.

My HTML code is something like this:

    <html>
      <body>
      <h2 class="nav-tab-wrapper">
        <a href="#tab-1" class="nav-tab nav-tab-active">First</a>
        <a href="#tab-2" class="nav-tab">Second</a>
        <a href="#tab-3" class="nav-tab">Third</a>
      </h2>
      <hr />
      <section id="tab-1" class="tab-content active">
        <P>Some content here.</P>
      </section>
      <section id="tab-2" class="tab-content hidden">
        <p>Some more here.</p>
      </section>
      <section id="tab-3" class="tab-content hidden">
        <p>Something else here.</p>
      </section>
    </body>
  </html>

and my broken jQuery code is:

(function( $ ) {
    $('h2.nav-tab-wrapper > a').click(function(event) {
    // Clicked anchor: prevent browser from taking action.
    event.preventDefault();

    // jQuery selector to display tab content.
    var active_tab_selector = $('h2.nav-tab-wrapper > a').attr('href');

    // Find the activated navigation and remove '.active'.
    var activated_nav = $('h2.nav-tab-wrapper > a.nav-tab-active');
    activated_nav.removeClass('nav-tab-active');

    // Add '.active' to the clicked navigation.
    $(this).parents('a').addClass('nav-tab-active');

    // Hide the displayed tab content.
    $(active_tab_selector).removeClass('active');
    $(active_tab_selector).addClass('hidden');

    // Show target tab content.
    var target_tab_selector = $(this).attr('href');
    $(target_tab_selector).removeClass('hidden');
    $(target_tab_selector).addClass('active');
  });
})( jQuery );

It doesn't work as expected. You can try it on JSFiddle (with some minimum CSS omitted here.)

I'm new to jQuery. What am I missing or doing wrong?

Thank you in advance.

Using sibling() selector

$('.nav-tab').click(function(e) {
  //Toggle tab link
  $(this).addClass('nav-tab-active').siblings().removeClass('nav-tab-active');

  //Toggle target tab
  $($(this).attr('href')).addClass('active').siblings().removeClass('active');
});
.nav-tab-active {
  color: #f00;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h2 class="nav-tab-wrapper">
  <a href="#tab-1" class="nav-tab nav-tab-active">First</a>
  <a href="#tab-2" class="nav-tab">Second</a>
  <a href="#tab-3" class="nav-tab">Third</a>
</h2>
<hr />
<section id="tab-1" class="tab-content active">
  <P>Some content here.</P>
</section>
<section id="tab-2" class="tab-content">
  <p>Some more here.</p>
</section>
<section id="tab-3" class="tab-content">
  <p>Something else here.</p>
</section>

Easy Tab Switch Plugin For jQuery, How to use it: Create a list of tabs pointing to the corresponding tabbed content as follow: < ul class = "tabs" id = "texample" > Load the main JavaScript tabs. js after jQuery. Call the plugin on the tab list. $( '#example' ). The example CSS to style the tabs. ul { Available configuration options. Change Page Title When Switching Browser Tabs - Funtabify. Create A Wizard Interface From Bootstrap Tabs - TabWizard. Easy Tab Switch Plugin For jQuery - Tabs.js. Transform Bootstrap Tabs Into A Dropdown On Mobile - Responsive Tabs. Minimal Material Design Tabs Plugin In jQuery. Simple jQuery Tabs Plugin For Tabbed Content

Several things I would recommend:

  1. The wrapper should include the tab content panes as well. This way if you have multiple tab containers on the same page, the wrapper knows which tabs and panes belong together.

  2. Write jQuery features using a plugin. Defining $.fn.tabs allows us to do things like $(selector).tabs() instead of putting a big mess of code in our (function ($) { ... })(jQuery) on-ready block

  3. the hidden class is redundant and making your program harder to write. If a tab (or tab content pane) has the active class, it is active - otherwise it is not active.

  4. Because the plugin toggles active on all child components in a wrapper, this may cause screen flickering (depending on your CSS) if we click on a tab that is already active. We should prevent the plugin from firing on active tabs.

  5. Use event delegation with .on to attach an event listener to each wrapper instead of using .click to attach an event listener to each tab. Using more event listeners results in programs that are slower to respond to events. Use as few listeners as possible.

  6. It'd be nice if we could customize which tab and content pane is initially active. Perhaps the user clicks /about#contact-us and that goes to the About page with the Contact Us tab active. Unless the HTML has the active class set for the Contact Us tab, it will not be displayed. This is a more advanced feature, so we cover it in a separate section at the end of this answer.

Here's a full working demo. Adjustments have been made to include recommendations above -

// write new features as a plugin
$.fn.tabs = function () {
  // for each tab wrapper ... 
  return this.each(function () {
    // capture wrapper context
    var wrapper = this
    // use single click event per wrapper, delegate  only to inactive tabs
    $(wrapper).on('click', '.nav-tab:not(.active)', function (event) {
      // remove all active
      $('.active', wrapper).removeClass('active')
      // get the clicked tab
      var clicked = $(event.target)
      // add the active class
      clicked.addClass('active')
      // find the tab's content and add the active class
      $(clicked.attr('href'), wrapper).addClass('active')
    })
  })
};

// keep on-ready function nice and clean!
(function ($) {
  $('.tab-wrapper').tabs()
})(jQuery)
.nav-tab.active {
  font-weight: bold;
}

.tab-content {
  display: none
}

.tab-content.active {
  display: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab-wrapper">
  <nav>
    <a href="#tab-1" class="nav-tab active">First</a>
    <a href="#tab-2" class="nav-tab">Second</a>
    <a href="#tab-3" class="nav-tab">Third</a>
  </nav>
  <hr />
  <section id="tab-1" class="tab-content active">
    <P>Tab Contents 1</P>
  </section>
  <section id="tab-2" class="tab-content">
    <p>Tab Contents 2</p>
  </section>
  <section id="tab-3" class="tab-content">
    <p>Tab Contents 3</p>
  </section>
</div>

<div class="tab-wrapper">
  <nav>
    <a href="#tab-1" class="nav-tab active">First</a>
    <a href="#tab-2" class="nav-tab">Second</a>
    <a href="#tab-3" class="nav-tab">Third</a>
  </nav>
  <hr />
  <section id="tab-1" class="tab-content active">
    <P>Some content here.</P>
  </section>
  <section id="tab-2" class="tab-content">
    <p>Some more here.</p>
  </section>
  <section id="tab-3" class="tab-content">
    <p>Something else here.</p>
  </section>
</div>

Simple jQuery Tabs Plugin For Tabbed Content, A simple, lightweight jQuery plugin that provides a basic tab switcher logic to show and hide tabbed content by clicking nav tabs. Re: Switching between TAB is very slow « Reply #6 on: February 06, 2014, 05:59:12 AM » Ah my mistakes, i declare panel.js in html header before jquery.easyui.min.js, after i moved the js declaration after jquery.easyui.min.js it works good .

Remove the ACTIVE from all to set the active on the designed tab.

$('.nav-tab').click(function(e){

var target_tab_selector = $(this).attr('href');

 $('.tab-content').addClass('hidden');
 $('.tab-content').removeClass('active');
    $(target_tab_selector).removeClass('hidden');
    $(target_tab_selector).addClass('active');

})
.active{display:block}
.hidden{display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
      <body>
      <h2 class="nav-tab-wrapper">
        <a href="#tab-1" class="nav-tab nav-tab-active">First</a>
        <a href="#tab-2" class="nav-tab">Second</a>
        <a href="#tab-3" class="nav-tab">Third</a>
      </h2>
      <hr />
      <section id="tab-1" class="tab-content active">
        <P>Some content here.</P>
      </section>
      <section id="tab-2" class="tab-content hidden">
        <p>Some more here.</p>
      </section>
      <section id="tab-3" class="tab-content hidden">
        <p>Something else here.</p>
      </section>
    </body>
  </html>

Simple Tab content area with HTML, CSS and jQuery, Tabs have a particular set of markup that must be used in order for them to ui- tabs-anchor : The anchors used to switch panels. A simple jQuery UI Tabs� jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

I'm kind of in a hurry now, but the first thing that is missing is to hide all the "active" ones when you click on some tab, add:

$('.tab-content').removeClass('active');

after your preventDefault() and give it a try.

Tabs Widget, EasyTabs is a lightweight jQuery plugin to provide full tab functionality, while leaving the styling up to you. Here's some very basic styling to get you started: and defaults of jQuery UI tabs, making it easy to switch from jQuery-UI tabs without� Easy to use tabs plugin for jQuery/Zepto. TabbedContent is a lightweight* tabs plugin that uses the HTML5 history API to add your tab navigation to your browser’s history. * 2.6 KB packed, 1.5 KB gzipped. It is compatible with both jQuery and Zepto.js libraries. It also has an API that will let you switch between tabs externally. Online Demos. Basic demo

jQuery EasyTabs Plugin, A tiny, fully accessible tab switcher for jQuery. Contribute to simonsmith/jquery. herotabs development by creating an account on A simple example of markup. I have various form fields in different tabs. When switching to another tab, I want to reset all form fields in the tabs which are closed. I know how to do this by targeting the individual field-id’s with a seperate onclick event. But would it be possible to integrate a generic ‘reset all formfield in closed tabs’ function into your script?

simonsmith/jquery.herotabs: A tiny, fully accessible tab , Create buttons to open specific tab content. All <div> elements with class=" tabcontent" are hidden by default (with CSS & JS). When the user clicks on a button� Create buttons to open specific tab content. All <div> elements with class="tabcontent" are hidden by default (with CSS & JS). When the user clicks on a button - it will open the tab content that "matches" this button. Step 2) Add CSS:

How To Create Tabs, p> <p><a href="#tabs-3" id="my-text-link5">I want to open tab please see my code..not sure why the tabs are not changing when I click a link. Related jQuery Plugins. Switch Tabs To Vertical Accordions On The Mobile - best-responsive.js. Switch Between Tabs And Accordion On Resize - Bootstrap Tab Collapse. Convert Bootstrap Tabs Into Accordions In Mobile View. Tabs And Accordions Made Easy - jQuery jpix Plugin. Responsive Multipurpose Tabs & Accordion Plugin With jQuery

Comments
  • Thank you all! I'm a newbie with jQuery. To a different extent each answer taught me something useful. This one in particular is smart, simple and definitely solved my problem.
  • Oh, I forgot the siblings haha. Nice one.
  • This has a surprisingly low number of upvotes and deserves more.
  • click on <a> inside tab content may cause an error
  • Aswin, changed a:not(.active) to .nav-tab:not(.active). thanks for catching that :D