Search code examples
javascriptcsshyperlinkhighlight

Selected Link class not showing correctly on inet explorer

I created a selected link class via java script to highlight the menu link of the page the user is currently on:

<script>
$(document).ready(function(){
  $('a').each(function(){
    if($(this).prop('href')==window.location.href){
       $(this).addClass('selected');
  }});
});
</script>

Then I edited the link states in css:

#topnavindex        {width:17%;float:left;position:fixed;}
#topnavindex ul     {margin:4% 0 0 10%;}
#topnavindex ul li  {font-size:83%;letter-spacing:3px;margin:0 0 1.7% 0;list-style-type:none;}
#topnavindex a      {font-weight:bold;text-decoration:none;}
#topnavindex a:link {color:#8a523e;}
#topnav a:link      {color:#232323;}
#topnav a:visited   {color:#232323;}
#topnav a:hover     {color:#27a896;}
#topnav a.selected  {color:#27a896;}

While Chrome and Firefox display my website correctly Internet Explorer ignores the selected link property.

Solution

  • So thanks to everybody that helped me figure out the problem. The solution was easier than expected.

    I had to change the IE settings ("Advanced"-tab) to "Allow active content to run files on my computer". After that IE could recognize the JavaScripts!

    This problem only occurs because my files were saved locally. On a live webpage the scripts will most likely work for the audience without changing the IE settings.