CODEWITHSUNDEEP
jqueryhtmlcss
user9159557
user9159557

Reputation:

Error in running a tabs with jQuery?

I have developing my tabs, using only jQuery without other third-party plugins.

jQuery(document).ready(function(){
  $(".resp-tab-content").hide();
  $("ul.resp-tabs-list li:first").addClass("active").show();
  $(".resp-tab-content:first").show();

  $("ul.resp-tabs-list li").click(function()
       {
    $("ul.resp-tabs-list li").removeClass("active");
    $(this).addClass("active");
    $(".resp-tab-content").hide();

    var activeTab = $(this).find("span").attr("href");
    $(activeTab).fadeIn();
    return false;
  });
});
ul.resp-tabs-list {
    list-style: none;
    background: none;
    margin: 0 auto;
    padding: 0;
    border-bottom: solid 1px #EAEAEA;
}

.resp-tab-item {
    color: #343a4e;
    font-size: .875em;
    cursor: pointer;
    padding: 0 .6em .5em;
    display: inline-block;
    list-style: none;
    float: left;
    border-bottom: solid 1px #FFFFFF;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    text-transform: capitalize;
}

.resp-tab-active {
    text-shadow: none;
    color: #1ca0de;
    border-bottom: solid 1px #3E9CCA;
    padding-bottom: .5em;
}

.resp-tabs-container {
    padding: 0px;
    clear: left;
    border-top: none;
    background: none;
}

.tab-content {
    margin: 1em 0 0 0;
    border-bottom: solid 1px #EAEAEA;
    padding-bottom: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="horizontalTab" style="display: block; margin: 0px; width: 100%;">
  <ul class="resp-tabs-list">
    <li class="resp-tab-item resp-tab-active"><span>Today</span></li>
    <li class="resp-tab-item"><span>This Week</span></li>
    <li class="resp-tab-item"><span>This Month</span></li>
  </ul>
  <div class="resp-tabs-container">
    <div class="resp-tab-content resp-tab-content-active" style="display:block"><div class="tab-content">a</div></div>
    <div class="resp-tab-content"><div class="tab-content">b</div></div>
    <div class="resp-tab-content"><div class="tab-content">c</div></div>
  </div>
</div>

I took the design from this example that I found here.

My idea is not to use the label <a>, but to use the label <span> to show the content of each tabs.

The error that the code is presenting me, is that when I click on each existing tabs, it does not work for me, the content is not hidden, it is not executed correctly.

I have managed to imitate the design, but it works not, and there is a small error in the design the gray border is on top and not on the text that represents each tabs.

introducir la descripción de la imagen aquí

Upvotes: 5

Views: 635

Answers (5)

Jon P
Jon P

Reputation: 19772

As I consider no other answer has addressed this properly, I will.

You should be using links (<a>) instead of span. It is semantically the right choice you are creating a link to another location on the page - the target tag.

Further more don't target the li for the event handler target the link itself, then you can access the href attribute directly

EDIT Code has been modified to support multi tabs.

jQuery(document).ready(function(){
  $(".resp-tab-content").hide();
  $("ul.resp-tabs-list li:first").addClass("active").show();
  /*Folling line changed to support multi tabs*/
  $(".resp-tabs-container .resp-tab-content:first-child").show();

  $("ul.resp-tabs-list a").click(function()
       {
    $("ul.resp-tabs-list li").removeClass("resp-tab-active");
    $(this).parent("li").addClass("resp-tab-active");
    /*Following line removed to support multi tabs
    $(".resp-tab-content").hide();
    */

    var activeTab = $(this).attr("href");
    /*Folliwng line added to support multi tabs*/
    $(activeTab).siblings(".resp-tab-content").hide();
    $(activeTab).fadeIn();
    return false;
  });
});
ul.resp-tabs-list {
    list-style: none;
    background: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    border-bottom: solid 1px #EAEAEA;
}

.resp-tab-item {
    color: #343a4e;
    font-size: .875em;
    cursor: pointer;
    /*padding: 0 .6em .5em;  MOVE THIS TO THE A Style*/
    display: inline-block;
    list-style: none;
    /*float: left; - Don't need this with Flexbox*/
    border-bottom: solid 1px #FFFFFF;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    text-transform: capitalize;
}

.resp-tab-item a, .resp-tab-item a:visited, .resp-tab-item a:active, .resp-tab-item a:hover {
  text-decoration:none;
  color: #343a4e; 
  list-style: none;
  padding: 0 .6em .5em; /*Move from LI style*/
  display:inline-block; /*Makes vertical padding meaningful*/
}

.resp-tab-active {
    text-shadow: none;
    color: #1ca0de;
    border-bottom: solid 1px #3E9CCA;
    /*padding-bottom: .5em;*/
}

.resp-tabs-container {
    padding: 0px;
    clear: left;
    border-top: none;
    background: none;
}

.tab-content {
    margin: 1em 0 0 0;
    border-bottom: solid 1px #EAEAEA;
    padding-bottom: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="horizontalTab" style="display: block; margin: 0px; width: 100%;">
  <ul class="resp-tabs-list">
    <li class="resp-tab-item resp-tab-active"><a href="#a">Today</a></li>
    <li class="resp-tab-item"><a href="#b">This Week</a></li>
    <li class="resp-tab-item"><a href="#c">This Month</a></li>
  </ul>
  <div class="resp-tabs-container">
    <div id="a" class="resp-tab-content resp-tab-content-active"><div class="tab-content">a</div></div>
    <div id="b" class="resp-tab-content"><div class="tab-content">b</div></div>
    <div id="c" class="resp-tab-content"><div class="tab-content">c</div></div>
  </div>
</div>

<div id="horizontalTab2" style="display: block; margin: 0px; width: 100%;">
  <ul class="resp-tabs-list">
    <li class="resp-tab-item resp-tab-active"><a href="#aa">Today</a></li>
    <li class="resp-tab-item"><a href="#bb">This Week</a></li>
    <li class="resp-tab-item"><a href="#cc">This Month</a></li>
  </ul>
  <div class="resp-tabs-container">
    <div id="aa" class="resp-tab-content resp-tab-content-active"><div class="tab-content">aa</div></div>
    <div id="bb" class="resp-tab-content"><div class="tab-content">bb</div></div>
    <div id="cc" class="resp-tab-content"><div class="tab-content">cc</div></div>
  </div>
</div>

Upvotes: 0

Tarun Khurana
Tarun Khurana

Reputation: 1037

Use CSS class for hide/active of the content. Add/remove class on basis of tab selection.

 $(".resp-tab-item").click(function(ev) {
     var activeClass = $(".resp-tab-item.resp-tab-active");
     activeClass.removeClass("resp-tab-active");
     var target;
     if (ev.target == this) {
         target = ev.target;
     } else {
         target = ev.target.parentElement;
     }
     $(target).addClass("resp-tab-active");
     var count = Array.prototype.indexOf.call(target.parentElement.children, target);
     var activeTabC = $(".resp-tab-content.resp-tab-content-active");
     activeTabC.removeClass("resp-tab-content-active");
     activeTabC.addClass("resp-tab-content-hide");
     var tabNeedToActive = $($(".resp-tab-content")[count]);
     tabNeedToActive.removeClass("resp-tab-content-hide");
     tabNeedToActive.addClass("resp-tab-content-active");


 });
ul.resp-tabs-list {
    list-style: none;
    background: none;
    margin: 0 auto;
    padding: 0;
    border-bottom: solid 1px #EAEAEA;
}

.resp-tab-item {
    color: #343a4e;
    font-size: .875em;
    cursor: pointer;
    padding: 0 .6em .5em;
    display: inline-block;
    list-style: none;
    float: left;
    border-bottom: solid 1px #FFFFFF;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    text-transform: capitalize;
}

.resp-tab-active {
    text-shadow: none;
    color: #1ca0de;
    border-bottom: solid 1px #3E9CCA;
    padding-bottom: .5em;
}

.resp-tabs-container {
    padding: 0px;
    clear: left;
    border-top: none;
    background: none;
}

.tab-content {
    margin: 1em 0 0 0;
    border-bottom: solid 1px #EAEAEA;
    padding-bottom: 1em;
}

.resp-tab-content-hide {
  display : none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="horizontalTab" style="display: block; margin: 0px; width: 100%;">
  <ul class="resp-tabs-list">
    <li class="resp-tab-item resp-tab-active">
      <span>Today</span>
    </li>
    <li class="resp-tab-item">
      <span>This Week</span>
    </li>
    <li class="resp-tab-item">
      <span>This Month</span>
    </li>
  </ul>
  <div class="resp-tabs-container">
    <div class="resp-tab-content resp-tab-content-active">
      <div class="tab-content">a</div>
    </div>
    <div class="resp-tab-content resp-tab-content-hide">
      <div class="tab-content">b</div>
    </div>
    <div class="resp-tab-content resp-tab-content-hide">
      <div class="tab-content">c</div>
    </div>
  </div>
</div>

Upvotes: 0

Akhil Aravind
Akhil Aravind

Reputation: 6130

  • You have done it in the wrong way. You added the wrong active class resp-tab-active
  • Instead of using href in span, use data-target to the target li

jQuery(document).ready(function(){
  $(".resp-tab-content").hide();
  $("ul.resp-tabs-list li:first").addClass("resp-tab-active").show();
  $(".resp-tab-content:first").show();

  $("ul.resp-tabs-list li").click(function(){
    $("ul.resp-tabs-list li").removeClass("resp-tab-active");
    $(this).addClass("resp-tab-active");
    $(".resp-tab-content").hide();

    var activeTab = $(this).find("span").attr("data-target");
    $(activeTab).fadeIn();
    //return false;
  });
});
ul.resp-tabs-list {
    list-style: none;
    background: none;
    margin: 0 auto;
    padding: 0;
    border-bottom: solid 1px #EAEAEA;
}

.resp-tab-item {
    color: #343a4e;
    font-size: .875em;
    cursor: pointer;
    padding: 0 .6em .5em;
    display: inline-block;
    list-style: none;
    float: left;
    border-bottom: solid 1px #FFFFFF;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    text-transform: capitalize;
}

.resp-tab-active {
    text-shadow: none;
    color: #1ca0de;
    border-bottom: solid 1px #3E9CCA;
    padding-bottom: .5em;
}

.resp-tabs-container {
    padding: 0px;
    clear: left;
    border-top: none;
    background: none;
}

.tab-content {
    margin: 1em 0 0 0;
    border-bottom: solid 1px #EAEAEA;
    padding-bottom: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="horizontalTab" style="display: block; margin: 0px; width: 100%;">
  <ul class="resp-tabs-list">
    <li class="resp-tab-item resp-tab-active">
        <span data-target="#first">Today</span>
    </li>
    <li class="resp-tab-item">
       <span data-target="#second">This Week</span>
    </li>
    <li class="resp-tab-item">
       <span data-target="#third">This Month</span>
    </li>
  </ul>
  <div class="resp-tabs-container">
    <div class="resp-tab-content" id="first">
      <div class="tab-content">a</div>
    </div>
    <div class="resp-tab-content" id="second">
      <div class="tab-content">b</div>
    </div>
    <div class="resp-tab-content" id="third">
      <div class="tab-content">c</div>
    </div>
  </div>
</div>

Upvotes: 0

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28455

Try following

  • For li, the active class is resp-tab-active set and reset this
  • Remove display:block style as it is unnecessary
  • Give ids to the content divs
  • Give hrefs to the span elements
  • Add display:flex to style for ul.resp-tabs-list

Note, you should not use hreffor span. Use some data attributes instead like data-tab-id, etc

jQuery(document).ready(function(){
  $(".resp-tab-content").hide();
  $("ul.resp-tabs-list li:first").addClass("active").show();
  $(".resp-tab-content:first").show();

  $("ul.resp-tabs-list li").click(function()
       {
    $("ul.resp-tabs-list li").removeClass("resp-tab-active");
    $(this).addClass("resp-tab-active");
    $(".resp-tab-content").hide();

    var activeTab = $(this).find("span").attr("href");
    $(activeTab).fadeIn();
    return false;
  });
});
ul.resp-tabs-list {
    list-style: none;
    background: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    border-bottom: solid 1px #EAEAEA;
}

.resp-tab-item {
    color: #343a4e;
    font-size: .875em;
    cursor: pointer;
    padding: 0 .6em .5em;
    display: inline-block;
    list-style: none;
    float: left;
    border-bottom: solid 1px #FFFFFF;
    outline: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    text-transform: capitalize;
}

.resp-tab-active {
    text-shadow: none;
    color: #1ca0de;
    border-bottom: solid 1px #3E9CCA;
    padding-bottom: .5em;
}

.resp-tabs-container {
    padding: 0px;
    clear: left;
    border-top: none;
    background: none;
}

.tab-content {
    margin: 1em 0 0 0;
    border-bottom: solid 1px #EAEAEA;
    padding-bottom: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="horizontalTab" style="display: block; margin: 0px; width: 100%;">
  <ul class="resp-tabs-list">
    <li class="resp-tab-item resp-tab-active"><span href="#a">Today</span></li>
    <li class="resp-tab-item"><span href="#b">This Week</span></li>
    <li class="resp-tab-item"><span href="#c">This Month</span></li>
  </ul>
  <div class="resp-tabs-container">
    <div id="a" class="resp-tab-content resp-tab-content-active"><div class="tab-content">a</div></div>
    <div id="b" class="resp-tab-content"><div class="tab-content">b</div></div>
    <div id="c" class="resp-tab-content"><div class="tab-content">c</div></div>
  </div>
</div>

Upvotes: 6

Mr.Pyae
Mr.Pyae

Reputation: 33

place JQuery script at the bottom of the code.

Upvotes: -4

Related Questions