javascript : applying class to parent tag element on a condition of child element

Question

如果您能帮我解答，我将不胜感激。请只用 JavaScript 回答，不要用 jQuery。

HTML代码:

 <li><a class="menu" href="#">Personnel</a>
   <ul>
      <li><a href="about.html">About</a></li>
      <li><a href="blog.html">Blog</a></li>
   </ul>
</li>

<li><a class="menu" href="#">Experience</a>
   <ul>
      <li><a href="http://stackoverflow.com/">Stack</a></li>
      <li><a href="http://odesk.com/">Odesk</a></li>
   </ul>
</li>

JavaScript 任务:

var url=window.location.href;

如果我的浏览器现在位于“about.html”页面。所以 url="about.html"。当时我想将 anchor 标记“Personnel”的类“menu”更改为类“active”。

否则，如果我的浏览器现在位于“help.html”页面中。所以 url="help.html"。当时我想将 anchor 标签“Experience”的类“menu”更改为类“active”。

Answer 1

相关html:

<a class="menu" id="personnel" href="#">Personnel</a>
<a class="menu" id="experience" href="#">Experience</a>

相关js:

if(url.indexOf('about.html')!==-1)
  var elem = document.querySelector('#personnel');
else if (url.indexOf('help.html')!==-1)
  var elem = document.querySelector('#experience');
elem.className='active';

---

编辑

如果不能(静态)更改 HTML，则

var elems = document.querySelectorAll('.menu'),
    elem,
    desiredElemContents;
if(url.indexOf('about.html')!==-1) desiredElemContents = 'Personnel';
else if (url.indexOf('help.html')!==-1) desiredElemContents = 'Experience';

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.className='active';
else console.error("No element found with content "+desiredElemContents);

请注意，这只能在每次加载页面时运行一次，因为您正在删除“菜单”类。