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

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

本文关键字：元素 应用于 条件下 javascript      更新时间：2023-09-26

如果你能帮我回答，我将不胜感激。请只使用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"。那时我想把锚标签"人员"的类"菜单"改为类"活动"。

否则，如果我的浏览器现在处于"help.html"页面。所以url="help.html"。那时我想把锚标签"Experience"的class"menu"改为class"active"。

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

请注意，在删除"menu"类时，每次页面加载只能运行一次。

希望这对您有所帮助。

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");
})
});
相关文章：