Error in running a tabs with jQuery?

  • A+
Category:Languages

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.

Error in running a tabs with jQuery?

 


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>

Comment

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: