How to Build Simple Tabs with Jquery

How to build simple tabs with jQuery?

I am guessing your website is having problems with href, i presume that when user clicks a href, website automatically eradicating itself.

Here is new solution's jsFiddle.

I have a new solution for you:

updated jQuery:

$('#tabs li a').click(function(){
  var t = $(this).attr('id');

  if($(this).hasClass('inactive')){ //this is the start of our condition 
    $('#tabs li a').addClass('inactive');           
    $(this).removeClass('inactive');

    $('.container').hide();
    $('#'+ t + 'C').fadeIn('slow');
 }
});

---

new html markup:

<ul id="tabs">

      <li><a id="tab1">test1</a></li>
      <li><a id="tab2">test2</a></li>
      <li><a id="tab3">test3</a></li>
      <li><a id="tab4">test4</a></li>

</ul>
<div class="container" id="tab1C">1Some content</div>
<div class="container" id="tab2C">2Some content</div>
<div class="container" id="tab3C">3Some content</div>
<div class="container" id="tab4C">4Some content</div>

jQuery: very simple tab switching

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>

How to create a simple jQuery tabs without jQuery UI?

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/

JQuery Simple Tab Navigation

I've made one for you at jsfiddle, hope this help. cheers

creating tabs using jquery

Well, I don't know what it looks like on your screen, but if I add jQuery, jQuery UI JS, and jQuery UI CSS, everything works.

Here's a Fiddle.

I would make sure you're referencing your scripts correctly, and are also including the CSS file for good measure..

As a quick test, you can include these references and see if the tabs show up:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

Building Tabs with JQuery, the most efficient and effective way?

Most efficient way would be using classes instead of ids.

Attach a click event to the lis that are descendants of #mylist, get the index of the current li that was clicked using $(this).index() and .show() the element with class name .tab that has the same index using the .eq() selector.

$('#mylist > li').click(function() {  $('.tab').hide().eq($(this).index()).show();});

.tab {  display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul id="mylist">  <li>one</li>  <li>two</li>  <li>three</li></ul><div id="tab-content">  <ul class="tab" id="tab-1-list">    <li>This is a bullet point for Tab 1</li>    <li>This is a bullet point for Tab 1</li>    <li>This is a bullet point for Tab 1</li>  </ul>  <ul class="tab" id="tab-2-list">    <li>This is a bullet point for Tab 2</li>    <li>This is a bullet point for Tab 2</li>    <li>This is a bullet point for Tab 2</li>  </ul>  <ul class="tab" id="tab-3-list">    <li>This is a bullet point for Tab 3</li>    <li>This is a bullet point for Tab 3</li>    <li>This is a bullet point for Tab 3</li>  </ul></div>

Simple menu tabs using jQuery

Try this:

  $('.nav li a').click(function (e) {
     e.preventDefault();
     var name = $(this).parent('li').attr('class');
     $('.selected').removeClass('selected'); // removes the selected class
     $(this).addClass('selected'); // adds the selected class to current clicked elem
     $('#'+name).show().siblings('ul').hide(); // shows the target and hides other
  });

Fiddle

jQuery - Tabs inside of tabs?

Try this,

<ul class="tabs">
    <li><a href="#tab1">Podcasts</a></li>
    <li><a href="#tab2">Videos</a></li>
</ul>
<div id="tab1" class="tab_content">
    <p>test</p>
</div>
<div id="tab2" class="tab_content">
    <ul class="tabs">   <!-- Add tabs here -->
        <li><a href="#tab2-1">Tab2-1</a></li>
        <li><a href="#tab2-2">Tab2-2</a></li>
    </ul>
    <div id="tab2-1">
        <p>test 1</p>
    </div>
    <div id="tab2-2">
        <p>test 2</p>
    </div>
</div>

Live Demo

jQuery Tabs with multiple content areas

Here is a Solution without id's (https://jsfiddle.net/L24qrbpj):

$(document).ready(function(){         $('ul.tabs li').click(function(){        var tab_id = $(this).attr('data-tab');
        $('ul.tabs li').removeClass('current');        $('.tab-content').removeClass('current');
        $(this).addClass('current');        $("."+tab_id).addClass('current');    })})

body {  margin-top: 100px;  line-height: 1.6;}.container {  width: 800px;  margin: 0 auto;}ul.tabs {  margin: 0 0 20px;  padding: 0px;  list-style: none;}ul.tabs li {  background: none;  color: #222;  display: inline-block;  padding: 10px 15px;  cursor: pointer;}ul.tabs li.current {  background: #ededed;  color: #222;}.tab-content {  display: none;  background: #ededed;  padding: 15px;  margin:0 0 30px;}.tab-content.current {  display: inherit;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
 <ul class="tabs">  <li class="tab-link current" data-tab="tab-1">Tab One</li>  <li class="tab-link" data-tab="tab-2">Tab Two</li>  <li class="tab-link" data-tab="tab-3">Tab Three</li>  <li class="tab-link" data-tab="tab-4">Tab Four</li> </ul>
 <div class="tab-1 tab-content current">  First content area </div> <div class="tab-2 tab-content">   Second content area </div> <div class="tab-3 tab-content">  Third content area </div> <div class="tab-4 tab-content">  Forth content area </div>    <div class="tab-1 tab-content current">  First content area AVB </div> <div class="tab-2 tab-content">   Second content area AVB </div> <div class="tab-3 tab-content">  Third content area AVB </div> <div class="tab-4 tab-content">  Forth content area AVB </div>
</div><!-- container -->

---

Related Topics