Morgan Ng Morgan Ng - 2 months ago 11
CSS Question

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

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

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;
}