Coordinated Tab Navigation

Two tabbed navigations are present, one at the top and one at the bottom. Targeting the div through classes allows for relevant content to be displayed in both.

Clicking the "Business" tab should show user-relevant information on both the top and bottom tabs. However, I am facing an issue where only the tab clicked appears in the "active" state. Even though they share the same class name.

Any assistance would be much appreciated.

Sincerely, Mike


HTML:

<!-- TOP TAB  -->
<section id="registerTabsContainer">

    <ul class="tabs">
        <li><a href=".tabViewer">Are you a Viewer?</a></li>
        <li><a href=".tabBusiness">Are you a Business?</a></li>
        <li><a href=".tabPlatform">Are you a Platform?</a></li>
    </ul>

    <!-- TOP CONTENT  -->
    <div class="registerTabsContent tabViewer">
        <h1>Register as a Viewer</h1>
    </div>

    <div class="registerTabsContent tabBusiness">
        <h1>Register as a Business</h1>
    </div>

    <div class="registerTabsContent tabPlatform">
        <h1>Register as a Platform</h1>
    </div>

    <!-- BOTTOM  TAB  -->
    <section id="tourSummaryTabsContainer">

        <ul class="tabs">
            <li><a href=".tabViewer">Are you a Viewer?</a></li>
            <li><a href=".tabBusiness">Are you a Business?</a></li>
            <li><a href=".tabPlatform">Are you a Platform?</a></li>
        </ul>

        <!-- BOTTOM  CONTENT  -->
        <div class="tourSummaryTabsContent tabViewer">
            <h1> Viewer content Bottom</h1>
        </div>

        <div class="tourSummaryTabsContent tabBusiness">
            <h1>Register as a Business</h1>
        </div>

        <div class="tourSummaryTabsContent tabPlatform">
            <h1>Register as a Platform</h1>
        </div>

JQUERY:

$(document).ready(function() {  
    // tabs  script
    $('.tabs li a:first').addClass('active');
    $('.registerTabsContent:not(:first), .tourSummaryTabsContent:not(:first)').hide();

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

        $('.tabs li a').removeClass('active');     
        $(this).addClass('active');
        $('.registerTabsContent, .tourSummaryTabsContent').hide();
        $(t).fadeIn('slow');  

        return false;    
    })  
});

CSS:

.tabs {
    list-style-type: none;
    margin:0;
    padding:0;  
}

.tabs li {
    padding: 0;
    list-style-type: none;
    margin:0;
    float:left;   
    list-style:none;
}
.tabs li a {
    font-family:Arial, Helvetica, sans-serif; 
    font-size:13px;
    color:#999999; 
    padding:7px 25px 4px 25px; 
    display:block; 
    text-decoration:none;

    background: rgba(227,227,227,1);
    /*border-right: 1px solid rgba(153,153,153,1); */
}

.tabs li a.active {
    background: white;   
    color:#999999;
    /*border-top: 1px solid white;*/ 
}

.tabs li a:hover {
    padding:7px 25px 4px 25px;
    background:#fff; 
}

Answer №1

Here I have made adjustments to your code by using an active class instead of an inactive class.

HTML

<ul class="tabs">
        <li><a href=".tabViewer">Are you a Viewer?</a></li>
        <li><a href=".tabBusiness">Are you a Business?</a></li>
        <li><a href=".tabPlatform">Are you a Platform?</a></li>
    </ul>

    <!-- TOP CONTENT  -->
    <div class="registerTabsContent tabViewer">
        <h1>Register as a Viewer</h1>
    </div>

    <div class="registerTabsContent tabBusiness">
        <h1>Register as a Business</h1>
    </div>

    <div class="registerTabsContent tabPlatform">
        <h1>Register as a Business</h1>
    </div>

    <!-- BOTTOM  TAB  -->
    <section id="tourSummaryTabsContainer">
        <ul class="tabs">
            <li><a href=".tabViewer">Are you a Viewer?</a></li>
            <li><a href=".tabBusiness">Are you a Business?</a></li>
            <li><a href=".tabPlatform">Are you a Platform?</a></li>
        </ul>

        <!-- BOTTOM  CONTENT  -->
        <div class="tourSummaryTabsContent tabViewer">
            <h1> Viewer content Bottom</h1>
        </div>

        <div class="tourSummaryTabsContent tabBusiness">
            <h1>Register as a Business</h1>
        </div>

        <div class="tourSummaryTabsContent tabPlatform">
            <h1>Register as a Business</h1>
        </div>
    </section>

CSS

.tabs li {
    padding: 0;
    list-style-type: none;
    margin: 0;
    float: left;
    list-style: none;
}

    .tabs li a {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
        color: #999999;
        padding: 7px 25px 4px 25px;
        display: block;
        text-decoration: none;
        background: #e3e3e3;
        /*border-right: 1px solid rgba(153,153,153,1); */
    }

        .tabs li a.active, .tabs li a:hover{
            background: #fff;
            /*border-top: 1px solid white;*/
        }

JavaScript

$(document).ready(function () {
    // tabs  script
    $('li:eq(0) a', '.tabs').addClass('active');
    $('.registerTabsContent:not(:first), .tourSummaryTabsContent:not(:first)').hide();

    $('.tabs li a').click(function(e) {
        e.preventDefault();

        if (!$(this).hasClass('active')) {
            $('a.active').removeClass('active');
            var i = $(this).parent().index();
            $('li:eq(' + i + ') a', '.tabs').addClass('active');

            $('.registerTabsContent, .tourSummaryTabsContent').hide();
            var t = $(this).attr('href');
            $(t).fadeIn('slow');
        }
    });

});

You can find a fully functional FIDDLE here. Let me know if you need any further clarification.

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

Incorporating multiple classes in an HTML document

Can multiple classes be added in HTML? Here is the code I attempted: <a href="#" class="class1 class2">My Text</a> Appreciate your help! :) ...

Bootstrap Datepicker allows you to set a maxdate of 2 days from the initial date selected

Imagine this scenario: when I choose a date for Check-In on May 10th, I want the Check-Out section to automatically show May 10th selected as well, with the following 2 days available and the rest disabled. If you're looking for documentation, you ca ...

Effortlessly inserting and posting data into a database with Laravel, Bootstrap Modal, and Ajax

My issue is that I am unable to retrieve the value of a textarea input in a Bootstrap modal using Input::get(), as it returns null. The submit button and text input in my view: <button type="button" class="btn btn-danger" onclick="customModalSubmitF ...

Problem with AngularJS function execution - require a delay in executing the second function

I am developing a small utility in AngularJS to manage the shopping cart for users. Here is the code snippet from my cart-service.js file: var myStoreCartService = angular.module("myStoreCartService", []); myStoreCartService.factory('Cart', fu ...

Intellisense feature for Javascript based on absolute path does not function properly in Visual Studio 2012

Setting up intellisense for jQuery has been a bit tricky. I have the jQuery files in another project that is not part of the current solution. In my mygrid.js file, I use the following reference: ///<reference path="http://ajax.aspnetcdn.com/ajax/jQuer ...

Mastering the art of utilizing ajax functions effectively

I have been checking online for answers, but I haven't found the information I need. So please excuse me if this question has been asked numerous times before. Currently, I am in the process of developing a website with several Ajax functions. My mai ...

What is the best way to implement validation in a textarea to restrict the word count to a minimum of 250 and a maximum

I want to implement jQuery validation for a textarea field, with a requirement of 250 minimum words and 1000 maximum words. Additionally, I need to display the word count in a span tag next to the text area. How can I ensure that this validation works even ...

Can Webpack effectively reduce the size of jQuery files?

While this question may seem basic, I have yet to come across a direct answer to it. My dilemma is whether or not to continue utilizing jQuery in my React application, primarily for AJAX purposes. Will webpack intelligently include only the necessary AJA ...

Can someone explain the significance of '{}' within the function shown below?

I've been able to grasp most of this code, but I'm unsure about "{}". Can anyone clarify its meaning? var Toggle = function(section, expand) { this.section = section || {}; this.expand = expand | ...

Adding HTML content using jQuery's document.ready feature

As a jQuery novice, I am attempting to incorporate a Facebook like button using the jQuery document.ready function. In my external Javascript file (loaded after the jQuery script), you will find the following code snippet: $(document).ready(function(){ ...

Tips for creating rounded corners in an Electron application

const electron = require("electron"); const {app, BrowserWindow, globalShortcut} = electron; const path = require("path"); function createNewWindow(){ newWin = new BrowserWindow({ width: 1000, height: 750, icon: path.join(__d ...

Can you provide guidance on how to zoom in on the Jquery Portlet when clicking the "zoom-in" icon?

After thorough research in various forums, I have not come across any relevant post addressing my specific issue. Therefore, I am reaching out for assistance. I currently have four Jquery Portlets on my page. My goal is to enable a zoom-in feature on o ...

How to italicize a portion of output using JavaScript

There are numerous inquiries on the internet and on this site regarding how to make italic fonts, however, none specifically address how to italicize only a section of a string. In my scenario, I have a form where I input the book title, author's nam ...

JavaScript interactive chart utilizing a table format

My goal is to create an engaging chart in the form of a table that informs users whether a service was operational or not on specific days of the month in a particular year. When a user clicks on a field, it should open a new URL with more detailed informa ...

Implementing various style guidelines for distinct elements

Currently, I am struggling with organizing my unordered list elements to be stacked side by side. The style rule I have been using is as follows: #slide ul,li{ float:left; list-style-type:none; } Now, I am attempting to introduce another unordered list t ...

Adjust the width of the table's td elements

I am looking to create a table similar to the one shown above. Here is my implementation. Please review my JSFiddle. HTML: <table border="0" id="cssTable"> <tr> <td>eredgb</td> <td><a href="self">0 ...

Printing iframe does not display CSS effects

As I work on developing a program that involves the use of iframes, I have encountered an issue with CSS effects not appearing when trying to print the iframe. Despite applying CSS successfully in browsers like IE, Chrome, Mozilla, and Edge, the printed ou ...

Troubleshooting: Issue with jQuery Ajax not receiving JSON response

Here is the JavaScript code I am using: $.ajax({ url: 'CheckColorPrice.php', type: 'POST', data: { url: '<? ...

Locate all the properties that are empty within each object contained in a JavaScript array

Consider this scenario: if I were to have an array of JavaScript objects like the following: var jsObjects = [ {a: 1, b: 2, c: null, d: 3, e: null}, {a: 3, b: null, c: null, d: 5, e: null}, {a: null, b: 6, c: null, d: 3, e: null}, {a: null, ...

Laravel: Retrieving controller results via AJAX by passing multiple checkbox values

I have a select box that is functional and sends values to the controller successfully. However, I am interested in using checkboxes instead of the select box, and I want to achieve this without the need for a submit button. I attempted to implement Ajax ...