How can i change jsp html link with action style

Question

Right now, i have a jsp page that has a tag of something like this :

<html:link action="/SequenceA">A</html:link>&nbsp;
<html:link action="/SequenceB">B</html:link>&nbsp;
<html:link action="/SequenceC">C</html:link>&nbsp;
<html:link action="/SequenceD">D</html:link>&nbsp;
<html:link action="/SequenceE">E</html:link>&nbsp;
<html:link action="/SequenceF">F</html:link>&nbsp;
<html:link action="/SequenceG">G</html:link>&nbsp;
<html:link action="/SequenceH">H</html:link>&nbsp;
<html:link action="/SequenceI">I</html:link>&nbsp;

The result would look something like this :

ABCDEFGHI

However, i would like change the style link when its clicked. How can i achieve as when i click on any alphabet, it refreshes and it will unbold everything? For instance if i clicked 'G', the font size of 'G' will increase by 1 and it will become bold. However, right after i clicked 'G', and i clicked 'H', 'G' will be unbold and font size will change back to its normal font size and 'H' will be bold and font size will increase by 1. But due to refresh, it will unbold everything

Expected result

When i click on G

ABCDEF G HI

After which i click on H

ABCDEFG H I

Current result due to refresh

ABCDEFGHI

Answer 1

So you need to add something to the page when it renders to indicate which alphabet letter is currently being viewed. For example if you add an active class to that letters link then all you need to do is add this reference in your css.

so if your html output looks like this:

<div class="alphabet">
 <a href="/">A</a>
 <a href="/">B</a>
 <a href="/" class="active">C</a>
 ...
</div>

your css will look like this:

.alphabet a {font-size:12px}
.alphabet a.active {font-weight:bold; font-size:13px;}