Having trouble executing a jQuery tab?

Currently, I am in the process of developing tabs using solely jQuery without incorporating any 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>

Inspired by this example here, I decided to forego the use of the label <a> and instead utilize the label <span> for displaying tab content.

Encountering an error in the code, as clicking on existing tabs fails to hide the content or execute properly.

Although I successfully replicated the design, functionality is lacking, and there is a minor flaw in the layout with the gray border appearing above rather than below the text representing each tab.

https://i.sstatic.net/WGa36.png

jqueryhtmlcss

Answer №1

Consider the following suggestions:

  • To make li active, use the class resp-tab-active and reset it when needed
  • Remove unnecessary display:block style
  • Add IDs to the content divs
  • Add HREFs to the span elements
  • Apply display:flex for styling ul.resp-tabs-list

Please Note: Avoid using href for spans. Instead, utilize data attributes 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;

    // Additional CSS properties removed for brevity 

} 
<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>

Answer №2

  • You have made a mistake in your approach by adding the incorrect active class resp-tab-active
  • Instead of using href within span, utilize data-target to target the specific 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>

Answer №3

Utilize CSS classes to toggle the visibility of content by adding or removing classes based on tab selection.

 $(".resp-tab-item").click(function(ev) {
     var activeTab = $(".resp-tab-item.resp-tab-active");
     activeTab.removeClass("resp-tab-active");

     var target;
     if (ev.target == this) {
         target = ev.target;
     } else {
         target = ev.target.parentElement;
     }

     $(target).addClass("resp-tab-active");

     var index = Array.prototype.indexOf.call(target.parentElement.children, target);

     var activeContent = $(".resp-tab-content.resp-tab-content-active");
     activeContent.removeClass("resp-tab-content-active");
     activeContent.addClass("resp-tab-content-hide");

     var tabToActivate = $($(".resp-tab-content")[index]);
     tabToActivate.removeClass("resp-tab-content-hide");
     tabToActivate.addClass("resp-tab-content-active");
 });
ul.resp-tabs-list {
    list-style: none;
    background: none;
    margin: 0 auto;
    padding: 0;
    border-bottom: solid 1px #EAEAEA;
}

/* Other CSS styling properties go here */

.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>
  
  /* Additional HTML content for tabs and their corresponding sections goes here */

</div>

Answer №4

After reviewing the responses, it seems that no one has properly addressed this issue. So, let me provide some insights.

It is recommended to use anchor tags (<a>) instead of span when creating links to different sections on a page for semantic correctness.

Additionally, rather than targeting the li element for event handling, it is better to target the link itself to directly access the href attribute.

UPDATE: The code has been adjusted to accommodate multiple tabs.

$(document).ready(function(){
  $(".resp-tab-content").hide();
  $("ul.resp-tabs-list li:first").addClass("active").show();
  /*Modified line to support multiple 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");
    
    var activeTab = $(this).attr("href");
    /*Updated line to support multiple 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;
    display: inline-block;
    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; 
  padding: 0 .6em .5em;
  display:inline-block; 
}

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

.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>

Answer №5

Make sure to always position your JQuery script at the end of the code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtain CSS3 gradient background-color of an element using JavaScript

Currently, I am using the following JavaScript (jQuery) to retrieve the background color (in RGB) of various other div elements: $theColor = $(this).css("background-color"); This method works perfectly, except when dealing with CSS3 gradients. For insta ...

jquerycssbackgroundfindgradient

What are some tips for keeping design proportions consistent on mobile apps?

Hey there, I have a question that may seem basic to some, but as a newbie in coding, I appreciate your patience. I've been working on an Ionic app and I'm struggling with maintaining CSS proportions of HTML elements. For instance, here's th ...

htmlcssionic-frameworkmobileresponsive-design

Select a checkbox from a dropdown menu

I need help with automatically checking a checkbox when an option is selected from a dropdown menu. Here is an example of the HTML code: <table> <tr> <td> <input type="checkbox" name="check1" />Process 1:< ...

javascripthtml

Unsuccessful retrieval of hidden property's value following ajax request

While using my web app, I encountered an issue with my ajax script that submits form data to a different div based on an input tag within the submitting form. Everything works smoothly until the moment the ajax script needs to read the returned ajax data. ...

jqueryajaxformsdynamichidden

Automatically updating numbers upon adding input with jquery for a dynamic user experience

To keep the numbers in correct order #1, #2, #3, #4.... simply add an input and then reorder after removing any of them. |add_input+| (button) #1 |new_input| |remove| (button) #2 |new_input| |remove| (button) #3 |new_input| |remove| (button) If you ...

jquery

I envision my home page being divided into two visually stunning full-screen sections, each taking up the entire height of the page

I am currently working with the code shown below. It successfully displays the first part in full height, regardless of resolution, but once I scroll to the second half, there is a large empty gap. How can I eliminate this gap and make the transition smoot ...

htmlcssviewport-units

How to Find the Element in JSON When it Represents a Date?

I'm attempting to retrieve data using a GET request and process it as JSON. However, I am facing an issue with a date within the JSON results. I am able to access the information before the date, but I'm struggling to access the data within the d ...

jqueryjsonajax

Following the execution of an AJAX request, the jquery script fails to run

I've encountered an issue with my website that utilizes pagination, filtering with jQuery and AJAX. Everything was functioning smoothly until I decided to switch my links to JavaScript links. When on the homepage without any filtering or pagination a ...

javascriptjqueryajax

What is the process for making a local storage item accessible to others on a network?

Can a local storage item be accessed from any computer on the network using the same Google Chrome extension that was previously set up? ...

javascripthtmlgoogle-chromegoogle-chrome-extension

Having trouble getting jQuery .append() to behave the way you want?

I have created a code snippet to display a table like this: $("#results").append("<table><tr><th>Name</th><th>Phone Number</th></tr>"); $("#results").append("<tr><td>John</td><td>123123123 ...

javascriptjquerycss

Tips for emphasizing the current element without disrupting existing styles

Is there a way to highlight an element with a border without causing it to shift? The script seems a bit glitchy when detecting mouse leaving the area. I'm unable to override parent element properties like border or outline. I also can't use pse ...

javascripthtmlcss

Uncover a section of text from HTML using the Beautiful Soup module

I have an HTML snippet like this: <span id="lbldiv" class="lbl" style="color:Blue;"> Division : First; Grand Total: 3861; Grand Max Total: 4600 </span> By using the get_text method on the span element, I can extract the text: Division : ...

pythonhtmlbeautifulsoup

What is the method to incorporate spread into inner shadow within an SVG file?

Seeking assistance with creating an inset-shadow effect with spread for an SVG rectangle in Figma. Check out this example of a rectangle with inner-shadow and spread. I have successfully added blur and positioned the shadow using x and y coordinates, but ...

htmlsvgsvg-filters

The required field validator's text property may stop displaying, but the error message will still show up in the validation summary

I am encountering an issue with a RequiredFieldValidator's text property. In my ASP web form, I have a Panel where I create a table with a textbox and a RequiredFieldValidator during the overridden OnPreInit event. This table is then stored in a sessi ...

asp.netwebformshtmllifecyclerequiredfieldvalidator

Tips for changing an input value when clicked using JQuery

Struggling to create an interactive mind mapping tool using JQuery? One challenge I'm facing is editing the content of a div once it's been set. I've implemented a function that successfully adds text to a div within the (mind-container). H ...

javascriptjqueryhtmlinputclick

Show a checkbox element with a square in the center instead of a tick mark

Is there a way to create a custom checkbox in HTML with a black box in the center, similar to the third checkbox shown in the image below? I've noticed this design in many interfaces, but I haven't been able to find a satisfactory example online ...

javascriptjqueryhtmlcss

Notify the user with a Jqgrid alert when they attempt to select multiple checkboxes

When editing rows, I wanted to avoid multiple selections. In order to achieve this, I need to check the condition if(count>1) and display an alert message. I am struggling to figure out how to retrieve the count of selected checkboxes in jqGrid. var m ...

javascriptphpjqueryhtmlajax

Establish a connection to a regular socket by utilizing WebSocket technology

I am attempting to connect a client interface to a hardware device using WebSocket in a browser like Chrome. The code snippet I have been using for connection is as follows: var ws = new WebSocket("ws://127.0.0.1:13854"); ws.onopen = function() ... Howev ...

javascripthtmlgoogle-chromewebsocket

Switch between modal popups using various buttons

I am attempting to trigger the display of this popup from various buttons in the menu, while keeping the content of the popup consistent. Thank you, Banick function OpenModalT() { var modal = document.getElementById('myModalT'); modal.st ...

htmljquerybootstrap-4popup

Angular Universal causes SASS imports to malfunction

Check out this sample app that you can download to see the issue in action: https://github.com/chrillewoodz/ng-boilerplate/tree/universal I am currently working on implementing angular universal, but I'm encountering an error with a SCSS import in o ...

cssangularsassangular-universal