How do I change a link's style using jQuery?

Question

I want to use jQuery to have to change my hyperlink to bold upon clicking it and switch it back to normal when clicking another link. I have following links in my webpage:

<div id="navigation">
        <ul>
            <li id="home"><a  href="/index.html">Home</a></li>
            <li id="test"><a  href="/tests.html">Tests</a></li>
            <li id="job"><a  href="/jobs.html"> Jobs</a></li>

        </ul>
      </div>

with the following styles:

#navigation { float:right; white-space:nowrap;}
#navigation ul{ list-style-type: none; line-height:14px; padding-top:20px; float:left; }
#navigation ul li{ float:left; display:inline; border-right:solid 1px #757171; padding-right:8px; margin-right:8px; }
#navigation ul li.last{ margin-right:0; border:0; padding-right:0; }
#navigation ul li a{ color:#fff; text-decoration: none;}
#navigation ul li a:hover,
#navigation ul li a.active { color:#00e0ff; }

How can I change the style of selected link to bold and/or grey?

What do you mean by 'selected'? Do you mean the link that corresponds with the page that you are currently on? — George, Jun 06 '14 at 08:04
selected means link click(while clicking the link it should be bold or grayed) — Sush, Jun 06 '14 at 08:13
Do you mean you want to know the CSS to format the text or the jQuery to toggle between two classes? — Sinister Beard, Jun 06 '14 at 08:26
yes...........i want to change the selected link text as bold and it returs the first state only after clicking another link — Sush, Jun 06 '14 at 08:40

score 0 · Answer 1 · answered Jun 06 '14 at 08:35

0

means link click(while clicking the link it should be bold or grayed)

There's no need to involve jQuery for this.

The :active psuedo-class will select elements while they are being clicked (and while Enter is being pressed while they are focused).

a:active { color: #333; }

answered Jun 06 '14 at 08:35

Quentin

914,110
126
1,211
1,335

it shows bold only clicking and returs to same before click back to another link.... – Sush Jun 06 '14 at 08:38
it is also not working – Sush Jun 06 '14 at 08:44
@Sush — Yes, that is what you asked for. You said "while clicking" not "while visiting the page the link points to". – Quentin Jun 06 '14 at 08:58
no i want to visit the page links ponits to – Sush Jun 06 '14 at 09:05

score 0 · Answer 2 · answered Jun 06 '14 at 08:46

0

use this :

$(function() {
   $('a.link').click(function() {
       $('a.link').removeClass('active');
       $(this).addClass('active');
   });
});

Fiddle : http://jsfiddle.net/bmK7q/1/

answered Jun 06 '14 at 08:46

Pranav

666
3
7

score -2 · Answer 3 · answered Jun 06 '14 at 08:30

-2

Try this code

jQuery('#navigation a').on('click', function(){
  jQuery(this).addClass('active')
})

answered Jun 06 '14 at 08:30

Stary

178
10

FYI: this appeared in the low quality posts queue because someone flagged it. Your answer appears plausible, so I presume it is because it is a code-only answer. – Oliver Matthews Jun 06 '14 at 08:51

Marc · Answer 4 · 2014-06-06T08:35:16.400

-3

In your case:

edit: of course there is not :selected, i mean :active

#navigation ul li a:active {
 font-weight: bold;
 color: #ccc;
}

edited Jun 06 '14 at 08:35

answered Jun 06 '14 at 08:23

Marc

2,659
3
34
41

i edited. i wrote bad code;). Of course no quotes. I was just in js. – Marc Jun 06 '14 at 08:35
There is no `:selected` pseudo-class in CSS. – Quentin Jun 06 '14 at 08:35
right of course. too early in the morning. i just edited. – Marc Jun 06 '14 at 08:37
while clicking the link it shows as bold and retuns to original state.i want to retuns bold to initial state only after clcking another link – Sush Jun 06 '14 at 08:46

How do I change a link's style using jQuery?

4 Answers4