Ways to designate a tab as active

Having trouble styling the active tab in my tabbed menu created with Bootstrap. The active class seems to only affect the first tab. How can I make it work for all tabs?

Check out this screenshot for reference.

Below is the code snippet:

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
      <script>
   jQuery(function($){
       $(".circle").children("circle").click(function(){
           $(".active").removeClass("active");
       });
   });
</script>
  </head>
  <body>

<!-- Nav tabs --><div class="d-none d-sm-block girintile">
<ul class="nav nav-justified" role="tablist">
  <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#section-1" role="tab"> <div class="team-box"> <img src="kisi.png" class="img-fluid rounded-circle circle active"> <h4 class="no-a">Yunus Melih Gözütok</h4><p>CEO</p> </div></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#section-2" role="tab"><div class="team-box"> <img src="kisi.png" class="img-fluid rounded-circle circle"> <h4 class="no-a">Yunus Melih Gözütok</h4><p>CEO</p> </div></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#section-3" role="tab"><div class="team-box"> <img src="kisi.png" class="img-fluid rounded-circle circle"> <h4 class="no-a">Yunus Melih Gözütok</h4><p>CEO</p> </div></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#section-4" role="tab"><div class="team-box"> <img src="kisi.png" class="img-fluid rounded-circle circle"> <h4 class="no-a">Yunus Melih Gözütok</h4><p>CEO</p> </div></a>
  </li>
    <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#section-5" role="tab"><div class="team-box"> <img src="kisi.png" class="img-fluid rounded-circle circle"> <h4 class="no-a">Yunus Melih Gözütok</h4><p>CEO</p> </div></a>
  </li>
</ul></div>

<!-- Tab panes -->
<div class="tab-content girintile "><br>
  <div class="tab-pane box active" id="section-1" role="tabpanel"><h4 class="bg-grey">Yunus Melih Gözütok</h4><p class="text-justified girintile"> yunus</p></div>
  <div class="tab-pane box" id="section-2" role="tabpanel"><h4 class="bg-grey">Yunus Melih Gözütok1</h4><p class="text-justified girintile"> melih</p></div>
  <div class="tab-pane box" id="section-3" role="tabpanel"><h4 class="bg-grey">Yunus Melih Gözütok2</h4><p class="text-justified girintile"> gözütok</p></div>
  <div class="tab-pane box" id="section-4" role="tabpanel"><h4 class="bg-grey">Yunus Melih Gözütok3</h4><p class="text-justified girintile"> lipsum</p></div>
  <div class="tab-pane box" id="section-5" role="tabpanel"><h4 class="bg-grey">Yunus Melih Gözütok4</h4><p class="text-justified girintile"> lipsum</p></div>
</div>
javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

If you're looking for a quick solution, simply implement the following code:

$(".nav-item .nav-link").click(function(e){
  e.preventDefault();
  $(this).addClass("active");
  $(".nav-item .nav-link").not($(this)).removeClass("active");
})

Answer №2

i have just implemented an active class with red text color; this means that when a user clicks on each item, the text color will change to red while the rest remain blue.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    <style>
    .active{
      color:red !important;
    }
    </style>
      <script>
   $(".nav-item .nav-link").click(function(e){
  e.preventDefault();
  $(this).addClass("active");
  $(".nav-item .nav-link").not($(this)).removeClass("active");
})
</script>
  </head>
  <body>

<!-- Nav tabs --><div class="d-none d-sm-block girintile">
<ul class="nav nav-justified" role="tablist">
  <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#section-1" role="tab"> <div class="team-box"> <img src="https://upload.wikimedia.org/wikipedia/commons/8/85/Codero_Hosting_Logo_%28100px%29.png" class="img-fluid rounded-circle circle active"> <h4 class="no-a">Yunus Melih Gözütok</h4><p>CEO</p> </div></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#section-2" role="tab"><div class="team-box"> <img src="https://upload.wikimedia.org/wikipedia/commons/8/85/Codero_Hosting_Logo_%28100px%29.png" class="img-fluid rounded-circle circle"> <h4 class="no-a">Yunus Melih Gözütok</h4><p>CEO</p> </div></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#section-3" role="tab"><div class="team-box"> <img src="https://upload.wikimedia.org/wikipedia/commons/8/85/Codero_Hosting_Logo_%28100px%29.png" class="img-fluid rounded-circle circle"> <h4 class="no-a">Yunus Melih Gözütok</h4><p>CEO</p> </div></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#section-4" role="tab"><div class="team-box"> <img src="https://upload.wikimedia.org/wikipedia/commons/8/85/Codero_Hosting_Logo_%28100px%29.png" class="img-fluid rounded-circle circle"> <h4 class="no-a">Yunus Melih Gözütok</h4><p>CEO</p> </div></a>
  </li>
    <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#section-5" role="tab"><div class="team-box"> <img src="https://upload.wikimedia.org/wikipedia/commons/8/85/Codero_Hosting_Logo_%28100px%29.png" class="img-fluid rounded-circle circle"> <h4 class="no-a">Yunus Melih Gözütok</h4><p>CEO</p> </div></a>
  </li>
</ul></div>

<!-- Tab panes -->
<div class="tab-content girintile "><br>
  <div class="tab-pane box active" id="section-1" role="tabpanel"><h4 class="bg-grey">Yunus Melih Gözütok</h4><p class="text-justified girintile"> yunus</p></div>
  <div class="tab-pane box" id="section-2" role="tabpanel"><h4 class="bg-grey">Yunus Melih Gözütok1</h4><p class="text-justified girintile"> melih</p></div>
  <div class="tab-pane box" id="section-3" role="tabpanel"><h4 class="bg-grey">Yunus Melih Gözütok2</h4><p class="text-justified girintile"> gözütok</p></div>
  <div class="tab-pane box" id="section-4" role="tabpanel"><h4 class="bg-grey">Yunus Melih Gözütok3</h4><p class="text-justified girintile"> lipsum</p></div>
  <div class="tab-pane box" id="section-5" role="tabpanel"><h4 class="bg-grey">Yunus Melih Gözütok4</h4><p class="text-justified girintile"> lipsum</p></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

Body section CSS selector

Can a CSS selector be included within the body section of an HTML document? Here's an example of my code (although it is not functioning as expected): <html> <head> </head> <body> <div style= "a[target=_blank] {backgroun ...

javascripthtmlcss

Cross-Site Scripting: Building a JavaScript object with the help of PHP's json_encode

Is this code 100% secure against XSS attacks? If not, could you provide an example of a malicious string that could make it vulnerable? <html> <body> <script> <?php $bad = "malicious string. Please provide exampl ...

phpjavascriptxssjson

Obtain the complete path in Vue router by utilizing nested routes

After creating nested routes for Vue Router, I encountered a problem while using the routes to generate a navigation menu. Currently, I am using route.path in 'router-link :to=' which only gives me a part of the path. I want to include the absolu ...

javascripttypescriptvue.jsvue-router

Display checkboxes on all TableRow elements as soon as one of them is checked

I've incorporated a material-ui Table into my project and have successfully implemented multi-select functionality. Here are the requirements I've fulfilled so far: Checkboxes are initially hidden - COMPLETED Hovering over a row reveals its che ...

javascriptcssreactjscheckboxmaterial-ui

Is Consistency Possible with CSS Transition Direction?

Take a look at this example: https://codepen.io/jon424/pen/XWzGNLe In the provided code snippet, there is a button that can toggle the visibility of an image. When clicked, the image disappears from bottom to top and reappears when clicked again. The use ...

javascriptcsscss-transitions

The SSE functionality is effective in a local environment, but encounters issues when deployed on Vercel's

Operating a proxy server, I send a request to OpenAI which responds with a Readable Stream object. The proxy server then redirects these events back to the client. While my code functions properly on a local deployment, it encounters issues when deployed ...

javascriptexpressstreamvercelserver-sent-events

Is it possible to locate an element using regex in Python while using Selenium?

Is it possible to interact with a dynamically generated dropdown list using Selenium if I only know the phrase present in its id or class name? Can Selenium locate an element using regex and click on it accordingly? ...

javascriptpythonhtmlregexselenium

Prevent repetitive content on your Node.js server

After realizing my small image hosting has many duplicate content, I am looking for a solution to prevent this issue in the future. My idea is to use either checksum or hash code so that whenever a new file is uploaded, it will be hashed and compared with ...

javascriptnode.jsexpressmd5sha1

Does it typically occur to experience a brief pause following the execution of .innerHTML = xmlhttp.responseText;?

Is it common to experience a brief delay after setting the innerHTML with xmlhttp.responseText? Approximately 1 second delay occurs after xmlhttp.readyState reaches 4. This issue is observed when using Firefox 3.0.10. ...

javascriptajax

Ways to design each element in React

I'm currently working on a React code that involves CSS for Scrolling functionality. When I try to use props.children.map, I encounter an error saying "TypeError: props.children.map is not a function". Since I am in the process of learning React.js, t ...

javascriptreactjsmap-function

Discord.js version 13 encountered an issue where it is unable to access properties of undefined while

Having trouble with creating a warn system that just won't work! I've tried various solutions but nothing seems to be fixing it. Would greatly appreciate any help! Error Log: [FATAL] Possibly Unhandled Rejection at: Promise Promise { <reje ...

javascriptnode.jsdiscorddiscord.js

"The $.ajax() fail() method is not functioning properly while the $.ajax() done() method is

I had a question about deferreds that I asked yesterday, and @yury-tarabanko provided me with an answer. The .done() function is working perfectly, but I am now trying to add a .fail() response. However, when I try to simulate a failed call by turning off ...

jqueryajax

What is the best way to incorporate an opaque overlay onto an image along with text overlay on top of the image?

I'm struggling to overlay an opaque layer above an image with responsive text on top of it. I want the opaque layer to be positioned above the image but below the text, and not appear when hovering over the image. You can view my test page here: I a ...

htmlcss

The button is disabled once inline CSS is applied to it

I was having issues with the CSS of my buttons being overridden by the user agent stylesheet. To fix this, I used inline CSS to override it. However, a new problem emerged where the buttons became unclickable. Here is the code I am using. Any assistance wo ...

htmlcssvue.js

What is the reason for utilizing letters as function name and parameters in JavaScript?

(function (a) { var r = a.fn.domManip, d = "_tmplitem", q = /^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /, b = {}, f = {}, e, p = { key: 0, data: {} }, h = 0, c = ...

javascriptjquery

Transforming Child_process.spawn's "Promise" syntax into "async/await" syntax.---Here's how you can convert the syntax of Child_process.spawn from using

Trying to wrap my head around the async/await syntax, I have come accross a code snippet that intrigued me. The following is the Promise-based version of the code: function callToolsPromise(req) { return new Promise((resolve, reject) => { l ...

javascriptnode.jsasynchronouschild-process

The IIS appears to be experiencing difficulties in serving static content such as CSS, JavaScript, and images, resulting

I've completed this process a countless number of times... Start by creating a project (in this case, an empty web application using only HTML files). Edit the hosts file to allow for a custom URL (local.xxx-xxx.com) Create an IIS website and app po ...

htmlasp.netiis

Issues with PHP not retrieving selected radio button values

Currently, I am using a PHP webpage to generate a list of all files with a .264 extension in a specific folder. Once the file is selected, it is then sent to a command for video playback on a display connected to the computer. I have encountered some diff ...

phphtmlforms

Adjusting the height in AngularJS based on the number of items in a table

I've developed a straightforward AngularJS application with multiple tables on one page. In order to add scrolling functionality, I initially used a basic CSS code snippet like: tbody { overflow: auto; } I also experimented with the https://github. ...

htmlcssangularjsscroll

When I try to scroll on my mobile device, the element is forced to reload

My donate page has a header with a generic placeholder image. On mobile devices like iPhones and Androids, the page initially looks great. However, when I scroll down and then back up, the header disappears for a moment before reappearing as originally ren ...

htmlcss