The border line beside the text in the current tab remains unchanged

I want to display a border line next to a tab when it is clicked or active. Currently, I am only able to show the line next to the tab that was initially selected, but it does not change dynamically with other tabs.

Here is my current implementation:

$(document).ready(function() {
   $('.nav-link').each(function(){
      var content_id = $(this).attr('href');
      $(this).after($(content_id).hide());
      if($(this).hasClass('active')) {
         $(content_id).show();
      }
   });
   
    $('.nav-link').on('click', function(){
        var content_id = $(this).attr('href');
        $('.tab-pane').hide();
        $(content_id).show();
    });
});
.child {
  padding-left: 60px; 
  padding-right:100px
}

a.nav-link span {
  position: relative;
}

a.nav-link.active span:before {
    position: absolute;
    content: "";
    width: 25px;
    height: 5px;
    border-bottom: 4px solid #e64a19;
    top: 8px;
    left: -35px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="teams" class="tabbable tabs-left">
    <div class="container">
        <div class="row">
            <nav class="nav flex-column col-md-1 teamTab" role="tablist" aria-orientation="vertical">
                <a class="nav-link active" href="#category1-tab" data-toggle="pill" role="tab"><span>Category1</span></a>
                <a class="nav-link" href="#category2-tab" data-toggle="pill" role="tab"><span>Category2</span></a>
                <a class="nav-link" href="#category3-tab" data-toggle="pill" role="tab"><span>Category3</span></a>
            </nav>
            <div class="tab-content col-md-11">
                <div class="tab-pane child active" id="category1-tab">
                    <h5 class="card-title">Name</h5>
                    <p class="card-title">position</p>
                </div>
                <div class="tab-pane child" id="category2-tab">
                    <h5 class="card-title">Category 2 Name</h5>
                    <p class="card-title">position</p>
                </div>
                <div class="tab-pane child" id="category3-tab">
                    <h5 class="card-title">Category 3 Name</h5>
                    <p class="card-title">position</p>
                </div>
            </div>
        </div>
    </div>
</div>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

<script>
    $(document).ready(function() {
        $('.nav.teamTab').on('click', 'a', function() {
            $('.nav.teamTab a.active').removeClass('active');
            $(this).addClass('active');
        });
    });
</script>

Answer №2

Revise the click event handler as shown below:

$('.menu-item').on('click', function() {
    $('.menu-item').removeClass('selected');
    $(this).addClass('selected');
    var section_id = $(this).attr('data-target');
    $('.content-section').hide();
    $(section_id).show();
});

Answer №3

One possible solution to ensure proper functionality in your JavaScript code is by including the addition and removal of the active class within a click function:

$('.nav-link').on('click', function(){
         $('.nav-link').removeClass('active');
    $(this).addClass('active');
        var content_id = $(this).attr('href');
        $('.tab-pane').hide();
        $(content_id).show();
    });

Answer №4

Modify the following code in your JavaScript file.

    $(document).ready(function() {
   $('.nav-link').each(function(){
      var content_id = $(this).attr('href');
      $(this).after($(content_id).hide());
      if($(this).hasClass('active')) {
         $(content_id).show();
      }
   });

    $('.nav-link').on('click', function(){
        var content_id = $(this).attr('href');

        $('.tab-pane').removeClass('active');
       $('.nav-link').removeClass('active');
       $('.tab-pane').hide();
      if($(this).hasClass('active')) {

         $(this).removeClass('active');
      }
       else{
        $(this).addClass('active');
        $(content_id).show();
      }

    });
});

Answer №5

Make sure to only keep the currently clicked .nav-link with the active class:

$('.nav-link').on('click', function(){
        $(this).addClass("active");
        $(".nav-link").not($(this)).removeClass("active");
});


$(document).ready(function() {
   $('.nav-link').each(function(){
      var content_id = $(this).attr('href');
      $(this).after($(content_id).hide());
      if($(this).hasClass('active')) {
         $(content_id).show();
      }
   });
   
    $('.nav-link').on('click', function(){
        $(this).addClass("active");
        $(".nav-link").not($(this)).removeClass("active");
        var content_id = $(this).attr('href');
        $('.tab-pane').hide();
        $(content_id).show();
    });
});
.child {
  padding-left: 60px; 
  padding-right:100px
}

a.nav-link span {
  position: relative;
}

a.nav-link.active span:before {
    position: absolute;
    content: "";
    width: 25px;
    height: 5px;
    border-bottom: 4px solid #e64a19;
    top: 8px;
    left: -35px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="teams" class="tabbable tabs-left">
    <div class="container">
        <div class="row">
            <nav class="nav flex-column col-md-1 teamTab" role="tablist" aria-orientation="vertical">
                <a class="nav-link active" href="#category1-tab" data-toggle="pill" role="tab"><span>Category1</span></a>
                <a class="nav-link" href="#category2-tab" data-toggle="pill" role="tab"><span>Category2</span></a>
                <a class="nav-link" href="#category3-tab" data-toggle="pill" role="tab"><span>Category3</span></a>
            </nav>
            <div class="tab-content col-md-11">
                <div class="tab-pane child active" id="category1-tab">
                    <h5 class="card-title">Name</h5>
                    <p class="card-title">position</p>
                </div>
                <div class="tab-pane child" id="category2-tab">
                    <h5 class="card-title">Category 2 Name</h5>
                    <p class="card-title">position</p>
                </div>
                <div class="tab-pane child" id="category3-tab">
                    <h5 class="card-title">Category 3 Name</h5>
                    <p class="card-title">position</p>
                </div>
            </div>
        </div>
    </div>
</div>

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

As soon as I hit the submit button on my website form, the URL is automatically refreshed with the information I provided

I am a beginner when it comes to forms and recently copied and pasted this login snippet code: <div class="login-form-1"> <form id="login-form" class="text-left"> <div class="main-login-form"> <div class="login-group"> ...

javascriptjqueryhtmlcss

Dynamically modifying the styling of elements within an iframe

In my current project, I encountered a challenge with changing the background color to black and the body text color to white within an iframe. Additionally, all elements that are originally styled with black in an external stylesheet also need to be chang ...

javascripthtmlcssdomiframe

Guide to generating customized CSS styles on-the-fly in Vue (similar to Angular's dynamic styling capabilities)

When working with Angular, we have the capability to dynamically set CSS properties. For example: <style ng-if="color"> .theme-color { color: {{color}}; } .theme-background-color { background-color: {{color}}; } .theme-border-color { border-color: { ...

javascriptcssvue.jsvuex

Make sure to use the jQuery load function to specifically target and retrieve

Hello, I'm new to working with jQuery and I have a question about adding a vertical scrollbar to a jQuery modal window. Specifically, I want the scrollbar to appear when there is a large amount of text within the modal window. Can you guide me on wher ...

jquerycssscrollbarmodal-dialog

Using j Query to create custom masks for various formats with the option to include optional digits

Looking for a way to mask the CVV card number..! The masking should allow for either 3 numbers like xxx 123 or 4 numbers like xxxx 4567 I have attempted to implement this with jQuery mask plugin, but it only allows for 4 characters. How can I enable both ...

javascriptjqueryhtmlmaskmasking

``Modeling CSS Classes Using the Adjacent Sibling

As a coding novice, I challenged myself to rebuild my WordPress site using HTML, CSS, and JavaScript. In my quest for the best way to create a responsive navigation bar, I stumbled upon an example on W3Schools. My dilemma lies in how to handle Adjacent Cl ...

css

What is the best way to incorporate animation and highlight a newly inserted row in a table without altering the styles of existing rows?

In my Nuxt 3 or Vue 3-based application, I am utilizing the HTML Table and incorporating a row into it through a button click. As I add a new row, I desire to implement a form of transition/animation so that the freshly added row is displayed with an anim ...

cssvue.jsanimationnuxt.jstailwind-css

Ways to refresh the main frame

Here is an example of parent code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Parent</title> </head> <body> <iframe src="https://dl.dropboxusercontent.com/u/4017788/Labs/child.html" width ...

javascriptjqueryhtmliframe

Error in altering element width dimension

For my Bootstrap card project, I have some specific rules in mind: The card should have a minimum width of 250px (card #1 - looks good) If the first line exceeds 250px in length, the card should increase its width without wrapping the line (card #2 - widt ...

htmlcsstwitter-bootstrapbootstrap-5

Exploring "Additional resources" using Selenium and Python

I am looking to extract text from the "Further reading" section of a Wikipedia article. My current code can open Google, input a request (such as 'Bill Gates'), and then find the URL of the corresponding Wikipedia page. Now I need help parsing th ...

htmlpython-3.xseleniumparsingselenium-webdriver

Adjust top position dynamically during resizing

When resizing the window, I am facing an issue with the image going outside of the box. I believe adjusting the position top of the image based on the box height might help in fitting the image properly within the box. $(window).resize(function() { va ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Tips for customizing the background of form inputs in React-Bootstrap

Currently, I have a next.js project with react-bootstrap. I am attempting to change the default blueish gray background color (#e8f0fe or rgb(232, 240, 254)) that bootstrap uses for form inputs to white. To achieve this, I am customizing the bootstrap var ...

cssbootstrap-4sassnext.jsreact-bootstrap

Appropriate application of section, article, and heading conventions

Recently, I created a complex liquid slider that serves as the header for my website. This slider contains various important content elements like heading tags (h-tags), paragraph tags (p-tags), and images. I found myself pondering whether each individua ...

csshtmlslider

Maintain the border styling of a radio button when it is in the selected state

Having an issue with the radio type options - when selected, a blue border appears but disappears if clicking elsewhere. Need the blue border effect to stay even when clicked outside, unless switching to the other option. Looking to align the price in th ...

htmlcss

What is the best way to apply padding to the top of a div when it is positioned below another div?

Observing the minimal spacing between the divs AboutDogs and AboutCats, I decided to apply padding-top: 20px to the AboutCats to create a visual distinction. However, I encountered a scenario where only AboutCats exists without any other div above it. In ...

htmlcsssasscss-selectors

How to position tspan x coordinate in Internet Explorer 11 with d3.js

Having a tough time with this issue. I've experimented with various solutions to properly display labels on my force directed d3 graph. Check out this stackBlitz Everything looks good in all browsers except IE11. https://i.sstatic.net/Cl61L.png In ...

javascripthtmlsvgd3.js

Accessing a frame inside an iframe using jQuery once the frame has fully loaded

Looking to access an element within a frame using jQuery. Here is the structure: <iframe id="frame1"> <frameset id="frameset"> <frame id="frame2"> <div id="exampleDiv">text</div> </frame> </frameset> < ...

javascriptjqueryhtml

Activate and Deactivate Link in Bootstrap Navigation Bar

After reading numerous posts on the topic and trying the same solution without success... The issue I am facing is that I want to implement Twitter Bootstrap 2.3.2 and its navbar. I have included the necessary css and js files along with jQuery. Initially ...

node.jstwitter-bootstrapexpresspug

"Employing a Backend Task Runner for a jQuery-Based Mobile Application

Currently, I am utilizing jQuery Mobile in conjunction with HTML5 to provide support for Android and iOS devices. Is there a control or technology that functions similarly to a background worker? My goal is to send data to the server without interrupting t ...

javascriptjqueryhtmljquery-mobile

What is the best way to ensure that a component remains the highest layer on a react-leaflet map?

I am encountering an issue where the table on my page only shows for a brief second when I refresh the page, and then it disappears. The Map Component being used is a react-leaflet map. I would like to have a component always displayed on top of the map wi ...

javascriptcssreactjsreact-leaflet