In order to mark the first link in my menu as active, I need it to have specific CSS settings applied. Using jQuery to add these settings to every link when clicked on makes it a bit tricky (simple menu = clicking changes color). So, I want the first link initially marked in CSS (as shown in the code...) and when another menu link is clicked, the first link should return to normal CSS settings. Below is my code, open to any suggestions.
EDIT: By the way, the first link also has the attribute rel="sl1" ...if that information is helpful for the solution...
$(document).ready(function()
{
// The first link must be pre-marked upon page load
$('#menu-vertikal li:first-of-type').addClass('active-link');
$('#menu-vertikal li a').click(function () {
$('#menu-vertikal li.active-link').removeClass('active-link');
$('#menu-vertikal li').eq($(this).parent().index()).addClass('active-link');
});
// Code for toggling content
$('#menu-vertikal ul a').on('click', function(){
var target = $(this).attr('rel');
$("#"+target).show().siblings("div").hide();
});
});