Click here to Skip to main content
14,975,416 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
I am trying to create a menu bar with list tag in html. Inside the list tag i have used the anchor tag . On clicking each anchor i am updating the grid view data source . I need to highlight the current anchor tag . Can you please help me in doing that ?
Posted

1 solution

Hi,

You may do this by manually, that means you needs to use to classes(css) to differentiate active and inactive a tag ,
CSS
.active
{
color:red;
/* use any style to highlight *\
}

.inactive
{
color:black;
}


while clicking in a tag first remove the class property of all a tag

JavaScript
$( "a" ).removeClass("active inactive" );


then add class to particular clicked a tag by
JavaScript
$( "#a_clickedid" ).addClass("active" );


Thanks
Magesh M
   
v2
Comments
januskarthik 11-Nov-14 0:53am
   
i tried the above code. but it did not work.
Magesh M N 11-Nov-14 1:12am
   
can you give your code that how you are trying,,
januskarthik 11-Nov-14 1:24am
   
<li><a id="abeyanceanchor" name="Abeyance" runat="server" >Abeyance</li>
<li><a id="deferanchor" runat="server" >Defer</li>


javascript :
$(document).ready(function () {
$('.ullist li a').click(function () {
$('.ullist li').removeClass('active');
$(this).parent().addClass('active');
});
});
Magesh M N 11-Nov-14 2:18am
   
i found no mistakes in your code , make sure that the css class 'active' and its definition is included in your page..
and the active css class must have the properties to differentiate it from inactive elements..

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900