New Topic/Question
Reply
Thanks Andrew for the tips. Even though I took a Javascript class, I'm starting at the beginning of the tutorials on the jQuery website. I will put this challenge on the back burner for now as I'm not being paid for this work anyway. I'm doing it for the experience. Maybe while I'm going through the tutorials and I get to the parent method, it will click at that time.
20 Replies - 2520 Views - Last Post: 13 February 2014 - 09:19 AM
#16
brianborn1968
- D.I.C Head
Reputation: 0
- Posts: 76
- Joined: 15-November 11
Re: Active State Nav- only on top level
Posted 13 February 2014 - 07:53 AM
Was This Post Helpful?
0
MultiQuote
#17
andrewsw
- no more Mr Potato Head
-
Reputation: 6957
- Posts: 28,696
- Joined: 12-December 12
Re: Active State Nav- only on top level
Posted 13 February 2014 - 08:50 AM
Well if it interests later your first code will work as follows, but only adding a single class-name, and using:
although I am sure there are neater ways to write this.
$('ul#main-nav a[href*="'+page+'"]').parents('li:last').children('a').first().addClass('active');
although I am sure there are neater ways to write this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="uft-8">
<title>Page Title</title>
<meta name="description" content="The Description">
<meta name="author" content="Andrew">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>
.active {
background-color: yellow;
}
</style>
</head>
<body>
<script>
$(function(){
var url = window.location.href;
var page = url.substr(url.lastIndexOf('/')+1);
$('ul#main-nav a[href*="'+page+'"]').parents('li:last').children('a').first().addClass('active');
});
</script>
<ul id="main-nav">
<li><a href="index.html" class="">Home</a></li>
<li><a href="page.html">Top Level 1</a></li>
<li class="has-children">
<a href="#">Top Level 2</a>
<ul>
<li><a href="page1.html">Child Level page 1</a></li>
<li><a href="page2.html">Child Level - Link 2</a></li>
<li><a href="page3.html">Child Level - Link 3</a></li>
</ul>
</li>
<li class="has-children">
<a href="#">Top Level 3</a>
<ul>
<li><a href="page4.html">Child Level page 4</a></li>
<li><a href="page5.html">Child Level - Link 2</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</body>
</html>
Was This Post Helpful?
1
#18
brianborn1968
- D.I.C Head
Reputation: 0
- Posts: 76
- Joined: 15-November 11
Re: Active State Nav- only on top level
Posted 13 February 2014 - 09:12 AM
Even though I said I was going to put this on the back burner, your reply Andrew has me working on this instead of taking the tutorials. 
/>/>
I will have to actual create the pages to see how your code works, but here is something that I was working on to make the explanation more clear or at least I hoped that it would.
http://jsfiddle.net/CubicalWeb/zh4Lr/
When clicking either “Sub-Menu 1” or “Sub-Menu 2”, I would like “Menu 2” to appear as being active.
/>/>I will have to actual create the pages to see how your code works, but here is something that I was working on to make the explanation more clear or at least I hoped that it would.
http://jsfiddle.net/CubicalWeb/zh4Lr/
When clicking either “Sub-Menu 1” or “Sub-Menu 2”, I would like “Menu 2” to appear as being active.
This post has been edited by brianborn1968: 13 February 2014 - 09:12 AM
Was This Post Helpful?
0
#19
andrewsw
- no more Mr Potato Head
-
Reputation: 6957
- Posts: 28,696
- Joined: 12-December 12
Re: Active State Nav- only on top level
Posted 13 February 2014 - 09:13 AM
The above code is saved as page1.html, page2.html, etc..
This post has been edited by andrewsw: 13 February 2014 - 09:14 AM
Was This Post Helpful?
0
#20
brianborn1968
- D.I.C Head
Reputation: 0
- Posts: 76
- Joined: 15-November 11
Re: Active State Nav- only on top level
Posted 13 February 2014 - 09:14 AM
andrewsw, on 13 February 2014 - 10:50 AM, said:
Yur first code will work as follows, but only adding a single class-name, and using:
although I am sure there are neater ways to write this.
$('ul#main-nav a[href*="'+page+'"]').parents('li:last').children('a').first().addClass('active');
although I am sure there are neater ways to write this.
This works exactly how I need it too. Thank you so much Andrew!
Was This Post Helpful?
0
| 