Swap a jQuery class with another if the class for ul li is currently active

I am currently developing a form builder and I would like to customize the appearance, specifically changing the color of the text. I want the text to be white when the class is set to active, and black when the class is not active.

Is there a way to achieve this using two generated classes?

I came across some information on a forum but it doesn't seem to be working for me:

 $('.game-star').addClass('game-star2').removeClass('game-star');
.game-star  ul li h3 {
font-size:14px;
color:#fff;
line-height:24px;
float:left;
font-weight:100;
margin-top:8px;
}

.game-star2  ul li h3 {
font-size:14px;
color:#fff;
line-height:24px;
float:left;
font-weight:100;
margin-top:8px;
}
 
<div class="game-star" style="height: 198px; overflow: hidden;">
  <ul>
    <li class="Active">
      <div class="game-star-icon"></div>
      <h3 class="winner-name">Major Millions<br>
        RMB 1000.00</h3>
      
    </li>
    <li>
      <div class="game-star-icon"></div>
      <h3 class="winner-name">Major Moolah<br>
        RMB 3,266.41</h3>
    </li>
    <li>
      <div class="game-star-icon"></div>
      <h3 class="winner-name">Major Moolah Isis<br>
        RMB 4,982.78</h3>
    </li>
    <li>
      <div class="game-star-icon"></div>
      <h3 class="winner-name">发大财<br>
        RMB 8,888.88</h3>
    </li>
    <li>
      <div class="game-star-icon"></div>
      <h3 class="winner-name">我发我发我发发发<br>
        RMB 9,999.99</h3>
    </li>
  </ul>
</div>


my CSS :

javascriptjquerycss

Answer №1

Why use two different CSS classes when you can achieve the same effect with just one using the CSS Attribute Selector? This powerful selector allows you to target specific elements based on their attributes, making your CSS code cleaner and more efficient. For example, instead of having separate classes for active items, you can simply add or remove the attribute class=Active to your HTML element.

While my previous example may not be the best practice, a better approach would be to use something like 

.game-star ul li[data-active=Active]
. This ensures clarity in your code and avoids any confusion between class names and attribute selectors. You can combine selectors, class names, and IDs to enhance the specificity of your styles. Learn more about it here.

Based on this, I recommend updating your code as follows:

HTML

<div class="game-star" style="height: 198px; overflow: hidden;">

<ul>
    <li data-active="true">
        <div class="game-star-icon"></div>
        <h3 class="winner-name">Major Millions<br>RMB 1000.00</h3>
    </li>
    <li>
        <div class="game-star-icon"></div> 
        <h3 class="winner-name">Major Moolah<br>RMB 3,266.41</h3>
    </li>
    <li>
        <div class="game-star-icon"></div>
        <h3 class="winner-name">Major Moolah Isis<br>RMB 4,982.78</h3>
    </li>
    <li>
        <div class="game-star-icon"></div>
        <h3 class="winner-name">发大财<br>RMB 8,888.88</h3>
    </li>
    <li>
        <div class="game-star-icon"></div>
        <h3 class="winner-name">我发我发我发发发<br>RMB 9,999.99</h3>
    </li>

</ul>
</div>

CSS

.game-star ul li[data-active=true] h3 {
    font-size:14px;
    color:#fff;
    line-height:24px;
    float:left;
    font-weight:100;
    margin-top:8px;
}

EDIT: If you prefer to stick with your original method, here is a fiddle that demonstrates it. Feel free to customize the colors to suit your design preferences! :)

JSFiddle

Answer №2

Revamp your look with this new style:

.game-star  ul li,.game-star2  ul li {
    font-size:14px;
    color:#000;
    line-height:24px;
    float:left;
    font-weight:100;
    margin-top:8px;
}

.game-star ul li.Active,.game-star2  ul li.Active{
    color:#fff;
}

Answer №3

I made some updates to the code. The classes are now equal. When active, the text will appear in white color while the rest of the text will be black.

.game-star  ul li h3,
.game-star2  ul li h3{
    font-size:14px;
    color:#000;
    line-height:24px;
    float:left;
    font-weight:100;
    margin-top:8px;
}

.game-star  ul li.active h3,
.game-star2  ul li.active h3 {
    color:#fff;
}

http://jsfiddle.net/pyjuk106/2/

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

How to send out an Array and a Variable at the same time using socket.io

Currently expanding my knowledge with Node.js, Express.js, and Socket.io. I successfully created a chat application that is functional at the moment. Now I am interested in letting the Client know when a user enters or exits the chat by emitting a variab ...

javascriptnode.jssocketsexpress

There seems to be an issue with declaring Gulp Open

Here is the code snippet for my `open.js` task: import gulp from 'gulp'; import gulpOpen from 'gulp-open'; gulp.task('open', () => { // doesn't work with `function()` either. const options = { uri: 'local ...

javascriptnpmgulp

I'm looking to have a span and an input side by side, both spanning the full width of the containing div. How can I achieve this?

In my code snippet below: <html> <body> <div style="width: 700px;"> <span>test</span> <input style="width: 100%;"></input> </div> </body> </html> I am facing an issue where the span and input el ...

htmlcss

Dropdown menu utilizing processing API and interacting with AJAX and DOM manipulation

My API data is not showing up in the dropdown menu. If I use ?act=showprovince, I can see the result. example.html <head> <link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel="stylesheet" type="text/css" hr ...

javascriptphpjqueryajax

Trouble with the display:none attribute in Firefox and Chrome

<tr style="height:5px" id="TRRSHeaderTrialBar" name="TRRSHeaderTrialBar" style='display:none'> <tr id="TREmail" name="TREmail" style="height:1px;" nowrap style='display:none'> Using the code snippet above to hide the bar w ...

javascripthtmlcss

I am faced with the puzzling situation where the value of my input type slider is displayed below the slider

I am currently working with HTML code that allows users to select a percentage using an input type range. Here is the code snippet I am using: <div class="container-fluid"> <div class="row"> <div class="c ...

htmlcssvertical-alignment

How to prevent the back button from functioning in Android devices

It's so frustrating always hitting a dead end and I really need a clear answer. How can I disable the hardware back button on my app? And where should I input the code to disable it? I simply want users of my app to navigate within the app without usi ...

androidjqueryhtmlcordova

What is the reason behind assignments being completed faster than doing nothing?

class RandomObj { constructor() { this.valA = ~~(Math.random() * 255 + 0.5); this.valB = ~~(Math.random() * 300 + 0.5); } } const array1 = new Array(100000); for (var i = 0; i < 100000; i ++) { array1[i] = n ...

javascript

Using jQuery's TabAccordion plugin, you can easily locate the next element in the DOM after the one that was clicked

I am looking to create a functionality where the user can click on a link within a specific area, causing the next element in the DOM with the class .zutdescr to open or close. However, I have been facing difficulties in selecting the correct element for ...

jquerydomtraversaldom-traversaljquery-traversing

What are the steps to resolving an issue in a Jest unit test?

In my ReactJs/Typescript project, I encountered an issue while running a unit test that involves a reference to a module called nock.js and using jest. Initially, the import statement was causing an error in the .cleanAll statement: import nock from &apos ...

javascriptreactjsunit-testingtypescriptjestjs

Retrieve the sequence of characters following the symbol #

Is there a way to retrieve the text that comes after the # sign in a URL? // obtaining the current URL var url = window.location.href; // example: //http://www.test.com/Tests/pagination.php?page=4#tab2 alert(url); How do I extract the term tab2 that ...

jquerymatch

Using ASP.NET MVC with JQuery to find the closest HiddenFor value

My current table structure is as follows: <table class="table table-bordered"> @for (var i = 0; i < Model.Count; i++) { <tr> <td width="25px"> @if (!Model[i].Letter.Equ ...

javascriptjqueryasp.net

Having difficulty in displaying database values in HTML modal using PHP

On my PHP page, I have a setup that displays data based on the fetched id from the URL. Everything is working smoothly, but when I click a button to show a modal with additional information, the modal appears blank. Here is the code snippet I am using: ...

javascriptphphtmlmysqlsql

Creating a dynamic shift in background color

Is it possible to use jQuery to slowly change the color of diagonal lines in a background styled with CSS, while also adding a fading effect? I have created a fiddle with the necessary CSS to display a static background. You can view it here: http://jsfid ...

javascriptjqueryhtmlcssfade

The issue with hiding and showing elements using JavaScript during drag and drop functionality

In my code, I have two boxes with IDs box1 and box2, These boxes can be dragged and dropped into the boxleft element, Upon dropping them, the background image is removed and only the name appears in the box, My issue is that when loading values into box ...

javascripthtmlcss

What is the best way to incorporate unique animations while scrolling using caroufredsel?

I am looking to enhance the scrolling experience by adding custom animations to the thumbnails. For instance, when a user clicks on the next button, I want the thumbnails leaving the screen to Fade out while the new thumbnails coming into view Fade In. Ba ...

jqueryslideshowscrollercaroufredsel

StealJS Module Repathing Techniques

There seems to be an issue with my setup, so I welcome all inquiries. I am utilizing an npm package called xrm-mock for a MS CRM mocking framework. Here is how I have configured it: steal.config({ meta: { "dependencyModule": { deps ...

javascriptnpmstealjs

I'm having trouble viewing my display:table-cell content because Internet Explorer is hiding it

I am attempting to align an icon vertically centered and far right inside a container. I currently have code that achieves this using ::after and table-cell properties. However, the content does not display in Internet Explorer. If I remove the display:tab ...

cssinternet-explorercss-tables

Ways to showcase information from an angular service

I'm struggling with displaying data from a service in my HTML view using AngularJS. My goal is to show a list of submitted forms called Occurrences in the view. When clicking on a list item, I want to be able to view all the data fields submitted thro ...

javascripthtmlangularjsservicecontroller

Saving MongoDB query results to a file using the built-in Node.js driver

I have been attempting to save the output of a MongoDB query to a file using the native Node.js driver. Below is my code (which I found on this post: Writing files in Node.js): var query = require('./queries.js'); var fs = require('fs' ...

javascriptnode.jsmongodb