Javascript function to add class to a list element based on # in url.

Question

I am trying to create a javascript function to add and remove a class to a list element based on the #tag at the end of the url on a page. The page has several different states, each with a different # in the url.

I am currently using this script to change the style of a given element based on the # in the url when the user first loads the page, however if the user navigates to a different section of the page the style added on the page load stays, I would like it to change.

<script type="text/javascript">

var hash=location.hash.substring(1);

if (hash == 'strategy'){
document.getElementById('strategy_link').style.backgroundPosition ="-50px";
}
if (hash == 'branding'){
document.getElementById('branding_link').style.backgroundPosition ="-50px";
}
if (hash == 'marketing'){
document.getElementById('marketing_link').style.backgroundPosition ="-50px";
}
if (hash == 'media'){
document.getElementById('media_link').style.backgroundPosition ="-50px";
 }
if (hash == 'management'){
document.getElementById('mangement_link').style.backgroundPosition ="-50px";
}

if (hash == ''){
document.getElementById('shop1').style.display ="block";
}

</script>

Additionally, I am using a function to change the class of the element onClick, but when a user comes to a specific # on the page directly from another page and then clicks to a different location, two elements appear active.

<script type="text/javascript">
 function selectInList(obj)
{
    $("#circularMenu").children("li").removeClass("highlight");
    $(obj).addClass("highlight");
}
</script>

You can see this here: http://www.perksconsulting.com/dev/capabilities.php#branding

.

Sorry for the lack of clarity. The question is how to modify the function listed first to add and remove the class: highlight, from the elements based on the hash in the url rather than onclick as it currently does. I realize that I am modifying the style of the element inline with my current function, I would modify the class rather than the style.

Thanks.

Answer 1

Your problem is your first block of javascript code. If you set the element's style this will always override any class styles on the element. Currently, when you navigate to the page with a hash #strategy you modify the inline style of the element. I would suggest revising your code like this to modify the class of the element.

var hash=location.hash.substring(1); 

$('#' + hash + '_link').addClass('highlight');

if (hash == ''){ 
  $('#shop1').show()
} 

Edited (Regarding your comment)

Here is what I would do:

First Create a function that adds the highlight class to a specific hash value and remove the highlight class from all others. You would probably want a default action when an invalid hash value is passed.

function highlightCircularMenuIcon(hashValue) {
  if (hashValue.length) {
    $('#circularMenu li').removeClass('highlight');
    $('#' + hash + '_link').addClass('highlight');
  } else {
    //default action you did have $('#shop1').show();
  }
}

Second, when the document is ready (or loaded), bind the click event for each of the LI elements in the circularMenu. Then in the click function call highlightCircularMenuIcon. Finally in the last part of the document.ready function call highlightCircularMenuIcon with the hash string from your URI.

$(document).ready(function () {
  $('#circularMenu li').click(function() {
    highlightCircularMenuIcon(($(this).name).replace("_link", ""));
  });

  highlightCircularMenuIcon(location.hash.substring(1)); 
});