CODEWITHSUNDEEP
javascriptjquerycss
Stickers
Stickers

Reputation: 78676

How to create a simple jQuery tabs without jQuery UI?

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.

Upvotes: 0

Views: 4481

Answers (3)

CreMedian
CreMedian

Reputation: 803

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/

Upvotes: 2

Vinc199789
Vinc199789

Reputation: 1046

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');
  });
});

Upvotes: 1

Dave Salomon
Dave Salomon

Reputation: 3297

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>

Upvotes: 2

Related Questions