What is the best way to alter the class of a <div> element with a specific ID?

In the web app, I have a tabbed page that allows users to filter restaurants based on budget and cuisine. The search results are categorized into meals, snacks, and drinks tabs.

Each tab is designed as a button with a corresponding window displayed below it.

Here is the code for the tabs:

<ul class="nav tabs" id="tabs">
            <li id="selectMeals">
                <button href="#filterTab" data-toggle="tab" class="btn meals-tab">MEALS</button>
            </li>
            <li id="selectSnacks">
                <button href="#filterTab" data-toggle="tab" class="btn snacks-tab">SNACKS</button>
            </li>
            <li id="selectDrinks">
                <button href="#filterTab" data-toggle="tab" class="btn drinks-tab">DRINKS</button>
            </li>
</ul>

The buttons link to a specific div that displays content associated with each tab:

<div class="tab-content">
            <div id="filterTab" class="tab-pane meals-tab-box">
                     <div class="results"></div>
            </div>
</div>

Currently, when clicking on any tab, the background color of the content does not match the tab's color. This is because the 

<div id="filterTab" class="tab-pane meals-tab-box">

only has the "meals-tab-box" class applied by default, rather than changing based on the selected tab. Is there a way to use Javascript to dynamically change the class of this div when switching tabs?

javascriptjqueryhtmlcsstabs

Answer №1

If you're looking to utilize the functionality of the tabs widget, you can make use of the "show event" and implement something along these lines:

jQuery(function ($) {
    $('#tabs').tabs();
    var $filterTab = $('#filterTab');
    var $filterBtns = $('#tabs').find('button[href="#filterTab"]');
    var filterClasses = $filterBtns.map(function () {
        return this.className.match(/[^\s]+-tab/) + '-box'
    }).get().join(' ');
    $filterBtns.on('show', function (e) {
        var $btn = $(e.target),
            clazz = e.target.className.match(/[^\s]+-tab/) + '-box';
        var clazz = $filterTab.removeClass(filterClasses).addClass(clazz);
    })
});

Check out the demo here: Fiddle

Answer №2

To leverage the power of jQuery, one approach to manipulate it is demonstrated below:

$('.tab li').removeClass('selected');
$('#selectMeals').addClass('selected');

Answer №3

To monitor and manage the tabs events of Bootstrap, you can do so by:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
})

You have the ability to modify tab classes within the event using jQuery.

Additionally, there is a show.bs.tab event available, with more information provided at: http://getbootstrap.com/javascript/#tabs

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

Searching for a past result retrieved through AJAX

I am currently working on an online script to track users, but I am facing an issue with duplicate usernames appearing when the page auto-refreshes. Is there a way in jQuery to check for and skip showing duplicate usernames from previous values? Below is ...

jqueryajax

Troubleshooting npm audit error involving loadVirtual and ENOLOCK

➜ npm safety check npm ERR! code ENOLOCK npm ERR! safety check This operation requires an existing lockfile. npm ERR! safety check Please generate one using: npm i --package-lock-only npm ERR! safety check Original error: loadVirtual needs a preexistin ...

javascriptnode.jsreactjsnpm

Transferring temporary information from server to controller using angular-file-upload

Currently, I am utilizing the angular-file-upload library which can be found at this link: https://github.com/danialfarid/angular-file-upload. In the example provided on that page, data from a file is sent to the backend from a controller using the availab ...

javascriptangularjsfile-uploadangular-file-upload

Creating a personalized directive in Angular 2 that restricts input to only characters that adhere to a specified regular expression

I have successfully developed a directive that restricts any character from being typed in an input field if it does not match a specified pattern. import { Directive, Input, Output, HostListener, EventEmitter } from "@angular/core" @Directive({ select ...

htmlangulartypescript

MVC3 seems to be incompatible with JQuery Ajax functionality

When it comes to User management, there are 4 main pages: List, Create, Details, and Edit. All these pages render the partial view called ListPartial. Below is the Ajax script that I utilize to load the ListPartial: <script type="text/javascript"> ...

jqueryajaxasp.net-mvc-3

Replace Formik with useFormik to streamline your code

I have implemented Formik/Yup for validation on a page that triggers a GraphQL mutation. The code is functioning as expected: export default function RemoveUserPage() { const [isSubmitted, setIsSubmitted] = useState(false); const [isRemoved ,setIsRemo ...

javascriptreactjstypescriptreact-hooksformik

The Clash of Bootstrap Spanning: Firefox Takes on Chrome and Safari

I am experiencing some strange issues with spacing in different browsers when using Bootstrap. Firefox is showing the spans correctly, but Chrome and Safari are spanning the items across the full width of the page, which I know is a responsive behavior of ...

htmlcsstwitter-bootstrapscaffolding

Suggestions for Implementing a Smooth Login Experience in React Native

As a newcomer to the world of react-native, I am facing a challenge in creating a login feature that interacts with our backend APIs on AWS. The goal is to navigate to the home screen upon receiving a token from the API, while displaying an error message i ...

javascriptreactjsreact-nativereact-redux

What sets local Node package installation apart from global installation?

My curiosity sparked when I began the process of installing nodemon through npm. Initially, I followed the recommended command and noticed the instant results displayed on the right side of my screen: npm i nodemon This differed from the installation ins ...

javascriptnode.jsnpmnodemon

Can text automatically adjust its size based on the browser's dimensions using CSS?

Can text automatically resize as the browser size decreases for liquid-based design using percentages? While images and divs can rescale, text scaling in percentages seems impossible! When set in percentages, it only changes the unified em setting for tha ...

css

Changing the color of buttons within the anchor and menu-separator classes in WordPress

https://i.sstatic.net/lYs6O.png Hi everyone, I'm new to WordPress and need help changing a green button to blue. I have found the button in an anchor tag with the class "menu-separator." Is there a way for me to write custom CSS to change its color? ...

htmlcsswordpress

Can different versions of Node be used simultaneously for various Node scripts?

Currently, I am utilizing nvm. Can a specific node version be used for a particular script? For instance... Using node 6 forever start -a -l $MYPATH/forever.log -e $MYPATH/err.log -c "node --max_old_space_size=20" $MYPATH/script_with_node_version_6.js U ...

javascriptnode.jsnvm

dynamic dropdown displaying colors for selection

Using a bootstrap form to add a printer involves selecting the material and color. The dynamic dropdowns are functioning correctly, but it is necessary to display the selected color for user clarity. Please guide me on how to pass the color along with its ...

javascripthtmlcss

Error: Unable to access the 'searchField' property because it is null

An error occurred: Cannot find the searchField property of null in App.render https://i.sstatic.net/ZYp3L.png ...

javascriptreactjsreact-redux

React component that renders conditionally based on the response of an API request

I am working on a status icon that changes based on the number of errors in an object. What is the most effective method for passing data from ComponentDidMount to the function where I want to analyze it? I am trying to aggregate the status in an object, ...

javascriptreactjsconditional-statementsfetch

How can I prevent the "flashes" that occur on load when setting the width of JQuery/Select2 to 100%?

My HTML page uses JQuery and Select2 to create several <option>s, which works smoothly. However, there is a brief moment (around 0.5-1 second) where it displays mySelectBox and mySelectBox2 separately before reformatting them to width=100%. This ini ...

jqueryjquery-select2

Tips for creating a dynamic animation: How to make a div fall from the top and rotate

Hey everyone, I'm working on creating an animation where a phone falls from the top and then rotates and skews to give the illusion of a 3D shape when it reaches the bottom. However, I'm facing an issue with flickering in the animation when it hi ...

htmlcss

Creating a three-dimensional shape using a transparent image in Three.js

Hey there! I'm currently working on creating a 3D model that features the upper and lower sides as transparent images, while the other sides are a solid color (yellow in this case). var texture = new THREE.TextureLoader().load( 'img.png' ); ...

javascript3dthree.js

Easily convert 100% of the height to pixels

Is there a way in HTML to convert a div's height from 100% to pixels without specifying a particular pixel value? ...

htmlcssasp.net

Potential issue: Firefox causes distortion in animated stroke-linecap="round" properties

While working on a project on Stack Overflow, I noticed a potential bug in Firefox when animating a line with stroke-linecap="round" and vector-effect="non-scaling-stroke" svg{border:1px solid} path{ animation: draw 1s ease-in; ...

cssanimationsvg