How to create a simple jQuery tabs without jQuery UI?

Question

When I click on the tab it then displays the content that is associate. I'm using # to do it. Here is what I have tried, but I don't know how to do the switching part, Can someone help please?

So when click tab1 to show tab1 content, and click tab2 to show tab2 content and so on.

$(document).ready(function () {
    $('.tab-content:not(:first)').hide();
    $('.tab-menu li a').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
    });
});

.tab-menu {
    padding: 0;
}
.tab-menu li {
    display: inline-block;
}
.tab-menu .active {
    background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="tab-menu">
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
</ul>
<p id="tab-1" class="tab-content">Content 1</p>
<p id="tab-2" class="tab-content">Content 2</p>
<p id="tab-3" class="tab-content">Content 3</p>

Edit, I prefer not to use jQuery UI or any plugins.

Why re-invent the wheel?

Liam
– Liam

2015-07-27 16:07:54 +00:00
Commented Jul 27, 2015 at 16:07 — Liam
– Liam, Commented Jul 27, 2015 at 16:07
Why introduce another library?

CreMedian
– CreMedian

2015-07-27 16:19:21 +00:00
Commented Jul 27, 2015 at 16:19 — CreMedian
– CreMedian, Commented Jul 27, 2015 at 16:19

Stickers · Accepted Answer · 2016-12-08 03:30:14Z

2

You're very close here, just a couple things:

1) I would suggest applying the "active" class to the parent <li> so your highlighting will be simpler to get at

2) Use the href of the clicked link to switch out the content, and I would use a class to hide/show content, however I will provide jQuery following your example of using the show() and hide() method. Either approach would work.

The final jQuery would be something like this:

$(document).ready(function() {
    $('.tab-content').slice(1).hide();
    $('.tab-menu li').eq(0).addClass('active');
    $('.tab-menu li a').click(function(e) {
        e.preventDefault();
        var content = $(this).attr('href');
        $(this).parent().addClass('active');
        $(this).parent().siblings().removeClass('active');
        $(content).show();
        $(content).siblings('.tab-content').hide();
    });
});

It's working in a fiddle for reference: http://jsfiddle.net/yscbeaxh/

edited Dec 8, 2016 at 3:30

Stickers

79.1k24 gold badges157 silver badges195 bronze badges

answered Jul 27, 2015 at 16:18

CreMedian

7686 silver badges16 bronze badges

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

Comments

Dave Salomon · Accepted Answer · 2015-07-27 16:21:53Z

It's really hard to get tabs right. Your current code isn't too bad, but you will face hiccups eventually. I can't say what OTTOMH, but, you will ;).

For your current code, you need to take the href attribute from the click li, select the matching p (based on ID - it's handy that the href attr returns #tab-1, you can use that as your selector!), and show it. You'll also want to hide the other 'active' tabs, and remove the class from any 'active' li's too.

This code should do the trick.

$(document).ready(function () {
    $('.tab-content:not(:first)').hide();
    $('.tab-menu li a').click(function () {
        $('.tab-menu li a.active').removeClass('active');
        var tabDivId = $(this).attr('href');
        $(this).addClass('active').siblings().removeClass('active');
        $('p.tab-content').hide();
        $(tabDivId).show();
    });
});

.tab-menu {
    padding: 0;
}
.tab-menu li {
    display: inline-block;
}
.tab-menu .active {
    background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="tab-menu">
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
</ul>
<p id="tab-1" class="tab-content">Content 1</p>
<p id="tab-2" class="tab-content">Content 2</p>
<p id="tab-3" class="tab-content">Content 3</p>

Vinc199789 · Accepted Answer · 2015-07-27 16:42:52Z

The solution is very simple.

First I gave all the tabs a display of none and the active class display:block; Than with jquery I take the href value of the <a> you clicked and than use that as the selector to add class active to the right tab.

demo

html:

<ul class="tab-menu">
  <li><a href="#tab-1">Tab 1</a></li>
  <li><a href="#tab-2">Tab 2</a></li>
  <li><a href="#tab-3">Tab 3</a></li>
</ul>
<div class="tabs">
  <p id="tab-1" class="tab-content active">Content 1</p>
  <p id="tab-2" class="tab-content">Content 2</p>
  <p id="tab-3" class="tab-content">Content 3</p>
</div>

css:

.tab-menu {
  padding: 0;
}
.tab-menu li {
  display: inline-block;
}
.tab-menu .active {
  background: yellow;
}
.tabs{
  width:50%;
}
.tabs > p{
 display:none;
}
.tabs .active{
 display:block;
}

Jquery:

$(document).ready(function () {
  $('.tab-menu li a').click(function () {
    $('.tab-menu li a').removeClass('active');
    $(this).addClass('active');
    tab = $(this).attr('href');
    $('.tabs .active').removeClass('active');
    $(tab).addClass('active');
  });
});

Collectives™ on Stack Overflow

How to create a simple jQuery tabs without jQuery UI?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related