add css class to <a> tag using javascript

Question

This is my code

<ul>
<li id="menu_house" class="main_menu "><a class="main_menu " href="searchHouse.php"><span>Houses</span></a></li>
<li id="menu_apartment" class="main_menu "><a class="main_menu " href="searchApartment.php"><span>Apartments</span></a></li>
<li id="menu_building" class="main_menu "><a class="main_menu " href="searchBuilding.php"><span>Buildings</span></a></li>
</ul>

I want to add a class to first <a> tag when page is loading, I know how to add menu_house <div>, like this:

$("#menu_house").addClass("selected");

How can I add a class to the <a> tag?

where is the problem? id are unique and you can add easily

xkeshav
– xkeshav

2011-05-30 10:03:24 +00:00
Commented May 30, 2011 at 10:03 — xkeshav
– xkeshav, Commented May 30, 2011 at 10:03

Álvaro González · Accepted Answer · 2011-05-30 10:09:41Z

2

$("#menu_house a").addClass("selected");

answered May 30, 2011 at 10:09

Álvaro González

147k45 gold badges282 silver badges378 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Steve Wilkes · Accepted Answer · 2011-05-30 10:08:54Z

1

In case you have multiple a tags with the main_menu class and you specifically want to add the class to the menu_house item:

$("#menu_house > a").addClass("selected");

answered May 30, 2011 at 10:08

Steve Wilkes

7,1433 gold badges31 silver badges33 bronze badges

2 Comments

Steve Wilkes Over a year ago

This is actually the same as the accepted answer, only I answered it first. Oh well :(

Sasindu H Over a year ago

this is also working. thank you very much. I'm very soory. this is my first question. I think I cant accept both.

Mehmetali Shaqiri · Accepted Answer · 2011-05-30 10:13:40Z

1

Another approach would be:

$('ul li:first-child a').addClass('selected');

answered May 30, 2011 at 10:13

Mehmetali Shaqiri

4584 silver badges12 bronze badges

Comments

melhosseiny · Accepted Answer · 2011-05-30 10:14:53Z

0

If #menu_house is always the first element use:

#("#menu_house a").addClass("selected");

If that's not the case use:

#("a.main_menu:first").addClass("selected");

answered May 30, 2011 at 10:14

melhosseiny

10.2k6 gold badges34 silver badges48 bronze badges

Comments

Prasenjit Kumar Nag · Accepted Answer · 2011-05-30 10:19:12Z

0

You can also use the :first pseudo class Like

$('a.main_menu:first').addClass("selected");

Here is a demo http://jsfiddle.net/joycse06/geKFy/

answered May 30, 2011 at 10:19

Prasenjit Kumar Nag

13.5k3 gold badges47 silver badges57 bronze badges

Collectives™ on Stack Overflow

add css class to <a> tag using javascript

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related