Click here to Skip to main content
15,867,704 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have created a menu in JQuery and HTML.The following is the code:

<style>
XML
ul{

list-style-type: none; /* This is to remove the bullet from the list */
}


li{

float : left;
width : 20%;

}

a {
text-decoration:none;  /* To remove underline from <a> */
color : Black ;    /* To give any color to <a> element */
font-weight : bold;
font-size : 14px;

}
</style>

XML
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.js"> /* This is to animate color */</script>

<script>

$(document).ready(function(){


/* This is to animate tag <a> ----------------------------------- */
$('a').hover(function() {
    $(this).animate({"color":"#000088","font-size":"18pt"}, 500);
}, function() {
    $(this).animate({"color":"black","font-size":"14pt"}, 500);
});
/* This is to animate tag <a> ----------------------------------- */

/* This is to animate tag <a> ----------------------------------- */
$('a').click(function() {
    $(this).animate({"color":"#000088","font-size":"18pt"}, 500);
}, function() {
    $(this).animate({"color":"black","font-size":"14pt"}, 500);
});
/* This is to animate tag <a> ----------------------------------- */



});

</script>


XML
<body>

<div >
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">Our Rates</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

</body>


This jquery animates the menu on mouse hover. I want that the particular menu item should be highlighted in blue and greater text when that particular page associated with that menu item is clicked. How to do that in JQuery?
Posted

1 solution

I tried JQuery

C#
$("a").click(function ( e ) {
    e.preventDefault();
    $("a.active").removeClass("active"); //Remove any "active" class
    $("a", this).addClass("active"); //Add "active" class to selected tab

    // $(activeTab).show(); //Fade in the active content
});


css for .active class

XML
.active{
text-decoration:none;  /* To remove underline from <a> */
color : Red;    /* To give any color to <a> element */
font-weight : bold;
font-size : 14px;
}


But that doesn't do anything!!!
 
Share this answer
 

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