My current menu uses superfish, but it lacks an active class to highlight the current page tab. To rectify this, I implemented the following JavaScript code.
<script type="text/javascript">
var path = window.location.pathname.split('/');
path = path[path.length-1];
if (path !== undefined) {
$("ul.sf-menu")
.find("a[href$='" + path + "']")
.parents('li')
.children('a')
.addClass('active');
}
</script>
Additionally, I created a CSS class named active for the script to utilize.
.sf-menu a.active{
margin-top:-5px;
height: 51px;
padding-top: 15px;
z-index: 100;
background-color:#072438;
}
The implementation worked well, but now I am considering changing the CSS from
a.active to a:active
How can I adjust this part in the JavaScript to align with the new CSS style?
.addClass('active');