Hello everyone.
I am attempting to set it so that upon clicking a link within this Joomla site (from the navigation menu), the link will become bold. I have already implemented CSS for “.active” and set the “LI” class to ‘active’ to the first class.
I have done a search for the JQuery code to do this, but each example that I tried did not work at all. The class remained to be on the first link, home.
Please see my existing code below and advise if you may please.
URL of test page –
http://bahawolf.com/davidlynn
CSS for ‘.active’ and ‘nav’ –
.nav {
background: url('../images/navbg.jpg') repeat-x;
border: 1px #a7a9ac;
padding-bottom: 3px;
padding-left: 10px;
margin-bottom: 30px;
height: 125px;
}
.nav ul {
line-height:26px;
margin: 0;
padding: 0;
list-style: none;
}
.active {
font-weight:700;
}
The HTML for the menu –
<div class="nav" id="menu">
<ul id="nav">
<li class = "active"><a href="index.php">Home</a></li>
<li><a href="index.php?option=com_content&view=article&id=47">Online Store</a></li>
<li><a href="?url=keynote_topics">Keynote Topics</a></li>
<li><a href="?url=contact">Contact Us</a></li>
<li><a href="http://blog.david-lynn.com">Blog</a></li>
</ul>
</div>
Existing example of JQuery Code –
$('.nav li a').click(function()
{
$('.nav li').removeClass('active');
$(this).parent().addClass('active');
});