Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Brian Gallagher
9,074 PointsJQuery Basics - Mobile Menu: Getting the option name to change when selected.
Hi,
I'm having difficulty getting the option name to change when selected. I have 3 pages: Portfolio (index.html), about.html and contact.html. I can navigate to about and contact, but the selected option title remains Portfolio. Also, I can't seem to navigate back to Portfolio once I've moved to one of the other pages. Can anyone spot my mistake?
HTML
<nav id="menu">
<ul class="nav">
<a href="index.html"><li class="selected">Portfolio</li></a>
<a href="about.html"><li>About</li></a>
<a href="contact.html"><li>Contact</li></a>
</ul>
</nav>
JQuery
//Create a select and append to #menu
var $select = $("<select></select>");
$("#menu").append($select);
//Cycle over menu links
$("#menu a").each(function(){
var $anchor = $(this);
//Create an option
var $option = $("<option></option>");
//Deal with selected options depending on current page
if($anchor.parent().hasClass("selected")) {
$option.prop("selected", true);
}
//option's value is the href
$option.val($anchor.attr("href"));
//option's text is the text of link
$option.text($anchor.text());
//append option to select
$select.append($option);
});
$("option").addClass("submenu");
//Bind change listener to the select
$select.change(function(){
//Go to select's location
window.location = $select.val();
});
Thanks
Brian Gallagher
9,074 Points <nav id="menu">
<ul class="nav">
<a href="index.html"><li class="selected">Portfolio</li></a>
<a href="about.html"><li>About</li></a>
<a href="contact.html"><li>Contact</li></a>
</ul>
</nav>
Take 2!
//Create a select and append to #menu
var $select = $("<select></select>");
$("#menu").append($select);
//Cycle over menu links
$("#menu a").each(function(){
var $anchor = $(this);
//Create an option
var $option = $("<option></option>");
//Deal with selected options depending on current page
if($anchor.parent().hasClass("selected")) {
$option.prop("selected", true);
}
//option's value is the href
$option.val($anchor.attr("href"));
//option's text is the text of link
$option.text($anchor.text());
//append option to select
$select.append($option);
});
$("option").addClass("submenu");
//Bind change listener to the select
$select.change(function(){
//Go to select's location
window.location = $select.val();
});
Brian Gallagher
9,074 PointsSorry Marcus, I'm not using workspace for this one
3 Answers
Marcus Parsons
15,719 PointsI see your problem, Brian. You have the anchor elements surrounding the list items. When this line:
if ($anchor.parent().hasClass("selected")) {
$option.prop("selected", true);
}
attempts to put a class of "selected" on its parent, it is adding that class to the <ul> not to the <li> because the <ul> is its parent (as it stands right now), not a list item (as its supposed to be). And so, it's not showing the proper option value because the option is getting selected.
What I would do is put the anchor elements inside the list items in your menu:
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li class="selected"><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="faqs.html">FAQs</a></li>
<li><a href="events.html">Events</a></li>
</ul>
This way, you are not only following good HTML practices but also can utilize the code you created.
Brian Gallagher
9,074 PointsHi Marcus,
Thanks for your response. I've tried that but unfortunately it hasn't solved the problem. By the way, is it best practice to put link inside list item? I think I tend to find it easier to style when outside.
Marcus Parsons
15,719 PointsYou are doing an unordered list. List items should be the immediate children of any list. Then you put content inside of those list items. Again, your code is almost exactly the same as my own except for the line where you add a class "submenu" which has nothing to do with the problem at hand.
I know for a fact that it does fix the problem because of what I explained above. The currently selected anchor element cannot place the class on a list item, because the anchor element is going to its parent element which is the <ul> element itself, not any <li> element. That is why the option will not have the proper text until your structure is remedied.
If you attempt to validate your document according to the W3 standards, it will be invalid. You will have at least 3 errors in your document stating that anchor elements can not be children of ul elements. You need to remedy your structure, as I said.
Brian Gallagher
9,074 PointsSorry, Ignore that, it didn't seem to come out quite as expected. I'll try again
Brian Gallagher
9,074 PointsThanks a million Marcus,
Appreciate the advice. Yes, I've got it working now having corrected the structure.
Marcus Parsons
15,719 PointsYou're welcome. I thought for a moment there you might be resistant to my advice, but I'm glad to see that wasn't the case. Happy coding, Brian!
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsCan you post a snapshot to your workspace? Your code didn't render correctly. http://www.teamtreehouse.com/forum/workspace-snapshots