When you click the button you want to change, the color of the button changes and the page moves, but I wonder what I can do to keep the changed color...
For example, if you look at the Auction mobile web page, if you click a category at the top, the page will remain red as it moves, and I wonder how it will be done.
If you just change the view that will be changed in jquery, will it be maintained?
Please give me an answer.
html jquery
When I look at the source of Auction Mobile, it looks like the following.
<li class="list-item">
<a href="http://mobile.auction.co.kr/SmartDelivery" onclick="pvprofiler.sendEvt('click','1A1D','smartdelivery');"><span class="category-txt">Smart Shipping<span>>>>
</li>
<li class="list-item active">
<a href="http://mobile.auction.co.kr/MartOneday" onclick="pvprofiler.sendEvt('click','1A1E','martonday');"><span class="category-txt">Same-day delivery<span>>>
</li>
The second <li> has an 'active' class, so it is displayed in red. This is what the CSS looks like this.
.list-item.active .category-txt {
color: #e63740;
}
Usually, when implementing this, it's easier to create HTML complete in a server language like JSP than jQuery. For example, JSP is:
<li class="list-item ${myCondition eq 'home' ? 'active' : ''}">
<!-- Omitted -->
</li>
According to the URL requested in the same way as above, the condition is applied to give and take the 'active' class. jQuery ramen:
if (location.pathname.indexOf('questions') != -1) {
$('#targetListTag').addClass('active');
}
You can do it like this.
© 2024 OneMinuteCode. All rights reserved.