jQuery replace one class with another if ul li class is active

Question

I'm making a form builder, I would like to change the appearance, for example color of the contents. When the class equal to active should get a white color of the text but when the rest are not active the text should be black instead.

How can I do this with generated 2 class?

Anyway I found something on this forum but it seems not 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> <!-- <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

Instead of using two different CSS classes, you can use one and utilize the CSS Attribute Selector . This selector is applied to the CSS selector you want it to be used on, for example .game-star ul li[class=Active] . It tell the CSS to look for an element with the name of game-star that has a child node of ul and a ul that has a child node of li WITH the attribute of class=Active . It comes in handy to simplify stuff that had to be done with JavaScript.

So instead of managing and changing class names with JavaScript, you only have to add or remove the attribute class=Active on your li. Now, the example I have given you is actually a bad practice example. The good practice would be something like this .game-star ul li[data-active=Active] would be more of a correct practice. The reason why is you never want to use a CLASS ATTRIBUTE IN A ATTRIBUTE SELECTOR the reason why? It because that already built in this way... .game-star ul li.Active You can compound selectors, name, and id together to add more emphasis on your target. You can read more about it here .

So my recommendation would be this 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 wish to do it your way, here in a fiddle for yours. Do remember to change the colors to what you desire! :)

JSFiddle

Answer 2

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 3

I updated the code. The classes is equal. Active is 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/