JQuery replaces one class with another if ul li class is active

Question

I am creating a form designer, I would like to change the appearance, for example, the color of the content. When the class equal to the active one should get the white color of the text, but if the others are not active, the text should be black instead.

How can I do this using the generated 2 classes?

Anyway, I found something on this forum, but it doesn't seem to work 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> <!-- <img src="../images/sideGameMenu1.png"/ class="winner-nameMoolar" "> --> <h3 class="winner-name">Major Millions<br> RMB 1000.00</h3> <!-- <p>RMB 625.78</p> --> </li> <li> <div class="game-star-icon"></div> <h3 class="winner-name">Major Moolah<br> RMB 3,266.41</h3> <!-- <p></p> --> </li> <li> <div class="game-star-icon"></div> <h3 class="winner-name">Major Moolah Isis<br> RMB 4,982.78</h3> <!-- <p></p> --> </li> <li> <div class="game-star-icon"></div> <h3 class="winner-name">发大财<br> RMB 8,888.88</h3> <!-- <p>RMB 396.42</p> --> </li> <li> <div class="game-star-icon"></div> <h3 class="winner-name">我发我发我发发发<br> RMB 9,999.99</h3> <!-- <p>RMB 28.89</p> --> </li> </ul> </div> my CSS : 

Answer 1

Change your style to:

 .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 2

Instead of using two different CSS classes, you can use one and use the CSS Attribute Selector . This selector applies to the CSS selector you want to use it with, for example .game-star ul li[class=Active] . It tells CSS to look for an element named game-star , which has a child element node ul and ul , which has a child element node of li WITH attribute class=Active . This is very convenient for simplifying work with JavaScript.

Therefore, instead of managing and changing class names using JavaScript, you only need to add or remove the class=Active attribute on yours. Now, the example I gave you is actually an example of bad practice. Something like this would be a good practice .game-star ul li[data-active=Active] would be a better practice. The reason why you never want to use CLASS ATTRIBUTE IN ATTRIBUTE SELECTOR , why? This is because it has already been built this way ... .game-star ul li.Active You can combine the selectors, name and identifier together to add more emphasis to your target. You can read about it here .

So my recommendation would be for your code:

HTML

  <div class="game-star" style="height: 198px; overflow: hidden;"> <ul> <li data-active="true"> <div class="game-star-icon"></div> <!-- <img src="../images/sideGameMenu1.png"/ class="winner-nameMoolar" "> --> <h3 class="winner-name">Major Millions<br>RMB 1000.00</h3> <!-- <p>RMB 625.78</p> --> </li> <li> <div class="game-star-icon"></div> <h3 class="winner-name">Major Moolah<br>RMB 3,266.41</h3> <!-- <p></p> --> </li> <li> <div class="game-star-icon"></div> <h3 class="winner-name">Major Moolah Isis<br>RMB 4,982.78</h3> <!-- <p></p> --> </li> <li> <div class="game-star-icon"></div> <h3 class="winner-name">发大财<br>RMB 8,888.88</h3> <!-- <p>RMB 396.42</p> --> </li> <li> <div class="game-star-icon"></div> <h3 class="winner-name">我发我发我发发发<br>RMB 9,999.99</h3> <!-- <p>RMB 28.89</p> --> </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 still want to do it your own way, here's a fiddle for you. Do not forget to change the colors the way you want! :)

Jsfiddle

Answer 3

I updated the code. Classes are equal. Asset - the white color of the text, and the rest are not active, the text should be black instead.

 .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/