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>
Post a Comment

Add Choice