javascript：在子元素的条件下将类应用于父标记元素

Question

如果你能帮我解答，我将非常感谢你。请仅使用JavaScript回答，但不能回答jQuery。

HTML code：

 <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”。那时我想把锚标签“Personnel”的类“菜单”更改为“active”类。

否则，如果我的浏览器现在位于“help.html”页面中。所以url =“help.html”。那时我想把主题标签“体验”的课程“菜单”改为“活跃”课程。

Answer 1

希望这对你有所帮助。

<强> HTML

<menu id="nav">
<ul>
<li><a href="active1.html">Home</a></li>
<li><a href="active2.html">Contact</a></li>
<li><a href="active3.html">About</a></li>
<li><a href="active4.html">Portfolio</a></li>
</ul>
</menu>

<强> CSS

#nav {
margin:200px auto;
width:430px;
}
#nav ul {
list-style:none;
background-color:#64abfb;
}
#nav ul li {
display:inline-block;
line-height:44px;
}
#nav ul li a {
margin:10px;
color:#FFF;
padding:4px;
font-size:20px;
text-decoration:none;
}
#nav ul li a:hover {
border-bottom:3px #FFF solid;
}

#nav ul li .active {
border-bottom:3px #FFF solid;
}

<强>的jQuery / JavaScript的

$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
$("#nav ul li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("active");
})
});

Answer 2

相关的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);

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