Tips for personalizing the appearance of active bootstrap tabs?

I am currently working on creating a website where Bootstrap tabs will display content according to their unique ID when selected. However, I have encountered an issue where the tab selected does not remain active. I am thinking of creating a custom active class to apply to the selected tab. Can anyone guide me on how to customize tabs when they are selected, such as changing the background color of a span when selected?

Here is a snippet of my Bootstrap code:

<div class="col-lg-2 col-md-2 col-sm-6 col-xs-6">
    <span data-toggle="pill" href="#lorem" class="btn btn-lg btn-default team-name">Lorem</span>
    <span data-toggle="pill" href="#ipsum" class="btn btn-lg btn-default team-name">Ipsum</span>
</div>

<div class="tab-content">
    <div id="lorem" class="tab-pane fade in active">
        <div class="text-center head-text">
            <h3>Lorem</h3>
        </div>
    </div>
    <div id="ipsum" class="tab-pane fade">
        <div class="text-center head-text">
            <h3>ipsum</h3>
        </div>
    </div>
</div>
javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Below is a code snippet that you might find helpful:

$('.tabsBtn').on('click', '.btn', function(){
$('.tabsBtn .btn').removeClass('activeClass');
$(this).addClass('activeClass');
});
.activeClass{ background:green !important; color:#fff !important;}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
<div class="col-lg-2 col-md-2 col-sm-6 col-xs-6 tabsBtn">
    <span data-toggle="pill" href="#lorem" class="btn btn-lg btn-default team-name">Lorem</span>
    <span data-toggle="pill" href="#ipsum" class="btn btn-lg btn-default team-name">Ipsum</span>
</div>

<div class="tab-content">
    <div id="lorem" class="tab-pane fade in active">
        <div class="text-center head-text">
            <h3>Lorem</h3>
        </div>
    </div>
    <div id="ipsum" class="tab-pane fade">
        <div class="text-center head-text">
            <h3>ipsum</h3>
        </div>
    </div>
</div>

Answer №2

Consider using li instead of span to allow bootstrap to apply the active class to the active pill.

To customize the styling, assign an id to the pill container and then override the default bootstrap styles as needed.

For an example, refer to https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_pills_dynamic&stacked=h

#pills li.active>a{
background:red;
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  <div id= "pills" class="container">
    <ul class="nav nav-pills">
      <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
      <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
      <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
      <li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
    </ul>
    
    <div class="tab-content">
      <div id="home" class="tab-pane fade in active">
        <h3>HOME</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div id="menu1" class="tab-pane fade">
        <h3>Menu 1</h3>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div id="menu2" class="tab-pane fade">
        <h3>Menu 2</h3>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
      </div>
      <div id="menu3" class="tab-pane fade">
        <h3>Menu 3</h3>
        <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
    </div>
  </div>

EDIT

Bootstrap specifically uses li for pill navigation. View this line of code in their repository https://github.com/twbs/bootstrap/blob/a5d48323a2bb4600fe6d53b5a881e1386e46e9ce/js/src/tab.js#L45

Using span requires modifications to the bootstrap file, which is not recommended. However, you can still style the li element to your preference.

Answer №3

To add functionality to a website using javascript/jQuery, you can add a class called "active" when an element is clicked. This allows you to then apply specific styling using CSS.

jQuery('.team-name').on('click',function(){
    jQuery(this).addClass('active');
    jQuery(this).siblings().removeClass('active');
}

With CSS, you can target the active class on the "team-name" element and apply a background color:

.team-name.active{
    background-color:#efefef;
}

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

Implement handleTextChange into React Native Elements custom search bar component

I need help with passing the handleTextChange function in the SearchBarCustom component. When I try to remove onChangeText={setValue} and add onchange={handleTextChange}, I am unable to type anything in the search bar. How can I successfully pass in the ...

javascripttypescriptreact-nativeexpo

Insert information into a nested array using Mongoose

I'm encountering an issue with my code, even though I know it may be a duplicate. Here is the snippet causing me trouble: exports.addTechnologyPost = function(req, res){ console.log(req.params.name); var query = { name: 'test ...

javascriptnode.jsexpressmongoose

Updating attribute values with jQuery

How do you use jQuery to change the attributes ng-click and Create to Update of the following HTML element? <a class="btn pull-right btn-link" ng-click="create()" ng-class="{'btn-link-disabled':isSaveAndContinue,'btn-link':!isSaveAn ...

jqueryangularjs

Retrieve information from a JSON script using C#

I need to extract data from a homepage, but the information I'm looking for is embedded in a JSON script. How can I retrieve this value? For example: <div id="contentWrap"> <div id="contentTextWrap"> <div id="contentText ...

c#htmljson

Establishing a dynamic database feature (such as a real-time leader board) on a website

Recently, I designed a fun JavaScript game for my website and now I am contemplating adding a leaderboard feature. However, I am unsure about which type of database would be the best fit - MongoDB, SQLite, or something else entirely. I have heard that SQ ...

javascriptmongodbsqlitewebdatabase

Angular 2 can efficiently generate multiple HTTP requests simultaneously from a single HTTP request

Backend API's: url: [ { "name": "ABC", "occupation": "Student", "address_url": "http://www.sample.com/address/person=hgjgjgyyfhg" }, { "name": "ABC1", "occupation": "Carpenter", "address ...

javascriptangularhttprequest

Having trouble fetching values in Node.js after a certain period of time has passed

Whenever the page loads, the sha1 function is supposed to run and it should run after 5 seconds. var crypto = require('crypto'); console.log(sha1()); setTimeout(sha1, 5000); console.log(sha1()); function sha1() { var dt = dateTime.create(); ...

javascriptnode.js

Checking connectivity in an Ionic application

Within my Ionic application, I am faced with the task of executing specific actions depending on whether the user is currently connected to the internet or not. I plan on utilizing the $cordovaNetwork plugin to determine the connectivity status within the ...

javascriptangularjsionic-framework

Associating a mouse click with elements within a repetitious function

Currently, I am importing children of element with ID #parentEle, creating a duplicate of each child and adding it to an array with a new ID - #eleCopy(i). I am facing an issue where I am trying to implement a click function on the original imported objec ...

javascriptjquery

What is the optimal way for text selection to operate within a clickable component on a web application?

We're currently developing a web application with expandable/collapsible elements. Here's an example of one of the clickable items: https://i.stack.imgur.com/jdLOu.png The text selection behavior when clicking on the element is causing some an ...

htmlcssweb-applicationsweb

What is the best way to retrieve information utilizing Http.get within my project?

I have a TypeScript file containing user data: File path: quickstart-muster/app/mock/user.mock.ts import {User} from "../user"; export const USERS:User[]=[ new User(....); ]; I have a service set up at: quickstart-muster/app/services/user.service.ts ...

javascripttypescriptangularangular2-http

Convert your flexible designs into dynamic HTML with our Flex to HTML/A

Looking for a solution to transform Flex code into Html/Ajax code. Most of my Flex code includes datagrids, buttons, and text labels. ...

htmlajaxapache-flex

Make sure to declare rest parameters first when using Typescript

I am dealing with a function that takes in multiple string arguments and one final argument of a complex type, which is called Expression. This particular code looks like this in JavaScript: function layerProp(...args) { const fields = args.slice(0, -1) ...

javascriptarraystypescriptrest-parameters

Activate the trigger event when the popover is activated remotely

I am facing a unique situation on my website where I have multiple popovers (pop1), (pop2), (pop3) that are triggered in sequence when the "Next" button is clicked. These popovers appear one after the other without direct access to them individually. If y ...

jqueryhtmlcsstwitter-bootstrappopover

Tips for adjusting the size of grid tiles according to the dimensions of the window within a specific range

I am currently exploring how to replicate the effect found on this webpage: When the window size is adjusted, javascript dynamically resizes the grid tiles between 200 and 240px based on the optimal fit for the screen. Is there a ready-made JavaScript/jQ ...

javascriptjquerycssresponsive-design

Create a duplicate of a div in jQuery while also updating its contents

I need help cloning a div that has the following structure: <div id="multipleSteps"> <div id="step_1"> <input type="text" name="step_name_1" id="step_name_1"> </div> ...

jquery

Implement a counter in a JavaScript table, initializing it to zero

I have successfully written my code, but there is one issue. The first row is starting with the number one instead of zero. I'm looking for suggestions on how to start from zero. Any help would be greatly appreciated. Thanks! <script> var tabl ...

javascriptjqueryhtml

Selenium: Locating the element correctly, yet unable to perform interactions with the input field

When trying to interact with an input field using the provided script: from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_ ...

pythonhtmlseleniumdomxpath

I am having difficulty retrieving the user's IP address in VueJs

Here is the code snippet: Vue.mixin(windowMixin) export default { name: "App", methods: { getIpAddress(){ localStorage.getItem('ipAddress') ? '' : localStorage.setItem('ipAddress&apos ...

javascriptvue.jsaxios

ng-repeat displaying an empty list

Currently, I am working on an AngularJS application where I am attempting to display data retrieved using the http get method from a RESTServer. The GET request is sent from one view and upon success, it navigates to another view within AngularJS. Both vi ...

javascriptangularjs