Today I am facing a problem. I want to create a script that will emphasize the active link that I clicked on. I'm not sure how to do this. Can you provide me with some advice?
I have an idea, but I'm not certain if it's the best solution.
I believe I should create a CSS class for this purpose. It should look something like this:
.active {
text-decoration: underline;
}
I am planning to use the methods .addClass("active") and removeClass("active").
I wrote a simple code, but unfortunately, it doesn't work properly.
$(function(){
$("li input").on( "click", function(e)
{
$(this).addClass("active");
});
});
Currently, I'm struggling with removing the underline from the previous element (object).
<ul>
<li><input type="button" onClick="Clock(0)" value="MADRID" name="MADRID"/></li>
<li><input type="button" onClick="Clock(0)" value="AMSTERDAM" name="AMSTERDAM"/></li>
<li><input type="button" onClick="Clock(4)" value="ABU DHABI" name="ABU DHABI"/></li>
<li><input type="button" onClick="Clock(1)" value="LONDON" name="LONDON"/></li>
<li><input type="button" onClick="Clock(8)" value="HONG KONG" name="HONG KONG"/></li>
<li><input type="button" onClick="Clock(8)" value="CHINA" name="CHINA"/></li>
<li><input type="button" onClick="Clock(3)" value="ATHENS" name="ATHENE"/></li>
<li><input type="button" onClick="Clock(8)" value="SINGAPORE" name="SINGAPORE"/></li>
<li><input type="button" onClick="Clock(4)" value="MOSCOW" name="MOSCOW"/></li>
<li><input type="button" onClick="Clock(7)" value="JAKARTA" name="JAKARTA"/></li>
</ul>