需要更改spry菜单栏中父标记元素的颜色,然后是当前浏览器URL

时间:2014-09-04 22:15:53

标签: javascript html anchor

我曾尝试过许多方式,如主动标记,JavaScript等。

 <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>

当我在index.php&#34; Home&#34;文字颜色会有所不同。在english.php或math.php或detauls.php&#34;考试&#34;文字颜色会有所不同等等。

1 个答案:

答案 0 :(得分:0)

最后突出显示当前的url菜单,我得到了这段代码。我在工作

<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>