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

Question

I will really appreciate you if you can help me with your answer. Please, answer with only JavaScript, but not with 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 Task:

var url=window.location.href;

If my browser is now in "about.html" page . So url="about.html". At that time I want to change the class "menu" of anchor tag "Personnel" to class "active".

Else if my browser is now in "help.html" page. So url="help.html". At that time I want to change the class "menu" of anchor tag "Experience" to class "active".

Did you see that Personnel . I want to replace that class "menue" with "active". Assume that they are both in my style.css file . Please help me with core javascript .Thanks . @c69 — Learner, Apr 27 '14 at 20:21

score 0 · Answer 1 · answered Apr 27 '14 at 20:21

0

Hope this will be little bit helpful for you.

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");
})
});

answered Apr 27 '14 at 20:21

Naresh

2,761
10
45
78

1

what is the point in having CSS here ? and - js formatting could be improved. – c69 Apr 27 '14 at 20:24
1

"with only JavaScript, but not with jQuery." – willlma Apr 27 '14 at 20:26
Thanks @puzzled Boy. But Please, answer with only core JavaScript, but not with jQuery. – Learner Apr 27 '14 at 20:27
My code can't be changed .Because it was done by Dreamweaver cs6 spry menue . – Learner Apr 27 '14 at 20:33
so what is the problem. Dreamweaver doesn't restrict to use j query .. jQuery is the latest and updated version of java script.. Just add this jquery with your javascript code . before this please include jQuery literary/ – Naresh Apr 28 '14 at 07:10

willlma · Accepted Answer · 2014-04-27T21:16:58.323

0

Relevant html:

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

Relevant 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';

Edit

If the HTML can't be changed (statically), then

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

Note that this can only be run once on each page load as you are removing the 'menu' class.

edited Apr 27 '14 at 21:16

answered Apr 27 '14 at 20:34

willlma

7,353
2
30
45

The *textContent* property isn't supported by all browsers in use, for some you need to use *innetText*. – RobG Apr 27 '14 at 21:01
Thanks, I've updated the answer (apparently, [FF doesn't support innerText](http://stackoverflow.com/questions/1359469/innertext-works-in-ie-but-not-in-firefox)). – willlma Apr 27 '14 at 21:18
I think your code is helpful .But this portion " var elem = document.querySelector('#personnel');" is not working .Please help me with this one .When I write alert(elem) it alerting "NULL" .@willlma – Learner Apr 29 '14 at 01:55
I did not use the same code but this type of method helped me .Thanks a lot . One thing can you help me . I know that ob.className='newclass' is used to change the class of a tag but If I want to change the ID then what I have to use rather than "className=" @willlma – Learner Apr 29 '14 at 04:07
You can use [`var elem = document.getElementById('personnel')`](https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById) instead. In order to change the `id` use `elem.id`. See the [element docs here](https://developer.mozilla.org/en-US/docs/Web/API/Element) – willlma Apr 29 '14 at 08:53

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

2 Answers2

Edit