Change the color of the active anchor (parent tag element) /current URL menu tab text in spry menu bar with JavaScript - Eg Net Solution

Here in this sites web and software developer can get some essential information.

MY Favorite .Net Question For Interview

This are not tidy. Just for rough. In Sha Allah will make it tiddy soon. 1.  DateTime2 Date range 0001-01-01 through 9999-12-31  vs Date...

Users Countries


Thursday, June 19, 2014

Change the color of the active anchor (parent tag element) /current URL menu tab text in spry menu bar with JavaScript


I had tried in many way like active tag, JavaScript etc for changing the color of the active tab menu in spry menu bar or any type of menu bar. At last I had made this code. Also you can find details in my stackoverflow ID  Muhammad Ashikuzzaman by clicking here . Here is a link for prove http://bpmpakhulna.com/index.php or http://www.limt.co.uk/englishexam/math.php

 <ul id="MenuBar1" class="MenuBarHorizontal">
   <li><a href="index.php" class="MenuBarItemSubmenu">Home</a>    </li>
   <li><a class="MenuBarItemSubmenu" href="#">Exam</a>
    <ul>
      <li><a href="english.php">English</a></li>
      <li><a href="math.php">Math</a></li>
      <li><a href="details.php">Details</a></li>
    </ul>
   </li>
   <li><a href="uklife.php" class="MenuBarItemSubmenu">Uk Life</a>
</ul>




<script type="text/javascript">
    var url=window.location.href;
    var elems = document.querySelectorAll('.MenuBarItemSubmenu'),elem,desiredElemContents;
    if (url.indexOf('index.php')>-1) 
      desiredElemContents = 'Home';
    else  if(url.indexOf('english.php')>-1||url.indexOf('math.php')>-1 ||url.indexOf('details.php')>-1)
      desiredElemContents = 'Exam';
    else if (url.indexOf('uklife.php')>-1) 
      desiredElemContents = 'Uk Life';
    for(var i=elems.length-1; i>=0; i--) 
      {
        var elemContents = elems[i].textContent || elems[i].innerText;
        if(elemContents!==desiredElemContents) continue;
        elem = elems[i];
        break;
       };
   if (elem) 
    { 
    elem.style.backgroundColor= "#ce0808";
    elem.style.color="white";
    }
</script>

No comments:

Add Choice