i've got a problem with getting my navigation bar to work. This probably is very easy to solve but i've been trying things for ages and can't get it to work. For CSS purposes i want the list item in the nav bar to get the class 'selected' when clicked and removed when a different nav bar item is clicked. For some reason it doesn't work. i'll show the code here:
<script type="text/javascript">
$('ul.navigation li a').click(function(){
$('ul.navigation li a').removeClass('selected');
$(this).addClass('selected');
});
</script>
I put this part in the <head>...</head>
This is the navigation bar which it's not having any effect on:
<div id="menuWrapper">
<nav>
<ul class="navigation underlinemenu" id="gooeymenu">
<li id="home" class="selected">Home</li>
<li id="work">Work</li>
<li id="services">Services</li>
<li id="about">About me</li>
<li id="contact">Contact</li>
</ul>
</nav>
</div>
Now when i go to the browser and inspect the element it doesn't show any indication of adding the class 'selected' to the clicked menu item. When i check the console it gives some sort of error about the $('ul.navigation li a').click(function(){ part of the javascript saying it isn't a function.
I hope this has explained my problem, i still think it's probably easy to solve but i've been stuck on this for an entire day so i hope anyone here can help me.
Always wire up your events within a .ready() function.
If you apply the .ready function to the document, you ensure that your events are wired up. Read here for a brief introduction on using $(document).ready()
//Wait for the DOM to load and be ready:
$(document).ready(function() {
$('ul.navigation li a').click(function(){
//Find the navigation link that is actually with the 'selected' class.
$('ul.navigation li.selected').removeClass('selected');
$(this).parent().addClass('selected');
});
});
The element you are adding the 'selected' class doesn't look right.
In your html markup, you have the <li class='selected'><a href=''> but in your javascript you are removing and adding the selected class on the a element.
So you want to do something like:
$(document).ready(function() {
$('ul.navigation li a').click(function(){
$('ul.navigation li.selected').removeClass('selected');
$(this).parent().addClass('selected');
});
});
Unless you meant to have the class on the a element, then just your initial HTML was wrong, and then Sergio's solution would work.
Here you have the "selected" class in the "LI" element
<ul class="navigation underlinemenu" id="gooeymenu">
<li id="home" class="selected">Home</li>
<li id="work">Work</li>
<li id="services">Services</li>
<li id="about">About me</li>
<li id="contact">Contact</li>
</ul>
but in your javascript you are removing and adding the "selected" class on the "A" element
So try this:
$(document).ready(function() {
$('ul.navigation li a').click(function(){
$('ul.navigation li').removeClass('selected');
$(this).parent().addClass('selected');
});
});
Related
I have a simple open/close responsive menu that uses jQuery. The menu works just fine but the website I'm using it on is a simple single page site with different sections. My problem is the menu opens and closes when the user clicks the menu handle and I'd like it to close when the user clicks on a menu item also. I have very little experience in jQuery so I need help solving this problem.
The HTML:
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
<div class="handle">Menu</div>
</nav>
The jQuery:
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
Thank you.
I think you need this:
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
$('nav ul a').on("click", function(){
$('nav ul').removeClass('showing');
});
I also noticed your HTML structure is wrong...
The <li> should be child of <ul>
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
<div class="handle">Menu</div>
</nav>
Working fiddle ==> https://jsfiddle.net/osd4nn1n/
You can change the toggleClass to just toggle to hide the elements. To get the behavior you'd like, change your jQuery selector to:
$('.handle, nav ul a').on('click', function(){
$('nav ul').toggle();
});
I have a navigation bar in which I want to add a class to the li tag of the current page so that I can add css to show what page you are on. I have attempted it using this script:
<script>
$(function() {
$("#nav.ul.li").click(function() {
$("#nav.ul.li").removeClass("current");
$(this).addClass("current");
});
});
</script>
This is the html I am using for my navbar:
<nav id="nav">
<ul>
<li>Home</li>
<li>
Events Calender
<ul>
<li>Rules</li>
<li>Facilities</li>
</ul>
</li>
<li>Video Guides</li>
<li>Gallery</li>
<li>Store</li>
<li>Where to find us</li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</nav>
However this script didn't work, so using javascript/jquery what is the best way to set a class on click to the li tags in my navigation bar?
All help much appreciated!
Remove the dots used like in #nav.ul.li and put space between them:
$(function() {
$("#nav ul li").click(function() {//or #nav > ul > li for direct element
$("#nav ul li").removeClass("current");
$(this).addClass("current");
});
});
Use . when you have a class on them like $('.sel') for <div class="sel"> and use # for element which has id as you normally use in css.
Use $("#nav > ul > li") instead of $("#nav.ul.li"). jQuery selector uses the same syntax as CSS. Other solution like $("#nav ul li") will also add/remove classes in unordered list puttes inside one of your <li> elements.
I would like to open a link for example "1" (1.html) and afterwards it should show (toggle) all child elements of the site 1 (1-1, 1-2,...). I did a research in google and of course also in stackoverflow.
I only found a similar issue of someone who uses wordpress, which it comes nearly to my wish, but I am not a expert like you guys: http://premium.wpmudev.org/forums/topic/jquery-toggle-and-allow-default
<div class="col col-md-3">
<nav id="#mobile-nav" class="nav clearfix" role="navigation">
<ul class="nav" id="menu-flag-menu">
<li>Startseite</li>
<li>1
<ul>
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
</ul>
</li>
<li>2
<ul>
<li>2-1</li>
<li>2-2</li>
<li>2-3</li>
<li>2-4</li>
</ul>
</li>
<li>3
<ul>
<li>3.1</li>
<li>3.2</li>
</ul>
</li>
</ul>
</nav>
My jQuery toggle function:
$("#menu-flag-menu li a").click(function(){
// close all opened sub menus
$("#menu-flag-menu > li > ul > li > ul > li > ul").slideUp();
// http://stackoverflow.com/questions/2534162/simple-jquery-toggle-of-children
var ul = $(this).next("ul");
if (ul.is(":hidden")) {
ul.slideDown();
}
else {
ul.slideUp();
} });
My CSS:
ul#menu-flag-menu > li > ul { display:none; }
I hope you can help me, thanks! This is my first question, I don't double post and I try to used my brain, google and stackoverflow, before I ask. :)
I guess the JSfiddle would not help for imagine my demand, but here it is:
http://jsfiddle.net/tFh9w/1/
http://jsfiddle.net/tFh9w/8/
Because you are using static HTML files, unless you want to make the menu different in each file (I hope you're at least including the menu using SSI), you need JS to detect what page the browser has opened, and to then trigger the opening of the relevant menu item.
First of all let's make it easy and add a level1 class to the level 1 menu elements.
<li class="level1">1
<ul>
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
</ul>
</li>
<li class="level1">2
etc etc
Then we find the last part of the URL, and use jquery to find the anchor who's href matches it. Then we check if it's a parent or child (only works for two levels, but can be adapted for more) and we open the correct menu item.
$(function(){
var hrefs = $.trim(window.location.href).replace(/\/$/, "").split('/');
var href = hrefs[hrefs.length -1];
href = '1.html'; // we have to cheat in jsfiddle. remove this line in production
// href = '1-1.html';
$('#menu-flag-menu a[href="' + href + '"]').each(function(){
// what are we opening - the child of this link or the parent?
if ($(this).parent().hasClass('level1')) $ul = $(this).parent().children('ul');
else $ul = $(this).closest('ul');
$ul.slideDown();
});
});
In the example I've had to cheat because in jsfiddle the href is always going to be _display
I'm trying to find an element in div called wrapper which has a class of active but is not the one I've just clicked.
Here is my code which works if I click on the .title class:
$(".title").click(function(){
if ($("#wrapper ul li").hasClass("active")) {
alert("found one!");
}
});
But i have no idea how to check if its not the one I've clicked. I tried adding .not(this) and .not($(this)) to my if statement to no avail.
I should add i plan to removeClass of any that are not the current selected div.
I'm sure I have something wrong somewhere.
for reference heres the HTML:
<div id="wrapper">
<ul>
<div class="title">Title</div>
<li class="active">Active Clicked List Item</li>
</ul>
<ul>
<div class="title">Title</div>
<li>Some Other List Item</li>
</ul>
<ul>
<div class="title">Title</div>
<li>Some Other List Item</li>
</ul>
</div>
Any Suggestions on how I can do this?
Please note that your html is invalid, DIV can not be a child of UL. Selector is not correct either using $('.title') since it is not the class that you are applying active to
hasClass() returns a boolean, so is not chainable
Not exactly sure what you are trying to do but based on code shown you need to use the not() filter before hasClass():
if ($("#wrapper ul li").not(this).hasClass("active")) {
OR
if ($("#wrapper ul li.active").not(this).length) {
If all it is for is to remove the class, simply remove the active class from all before adding to the current one and you don't need to test for it first
Using not works fine to exclude an element:
$('#wrapper li').click(function(){
$('#wrapper li').not(this).removeClass('active');
$(this).addClass('active');
});
Demo: http://jsfiddle.net/97DXe/
If you comment out the addClass, you will see that clicking the already active element doesn't remove the class from it.
If you are going to set the active class on the clicked element, it doesn't do much harm to simply remove the class from all the elements first, so then you wouldn't need the not.
Just wondering if anyone can provide some basic advice on an accordion I'm trying to simplify. Got a working version, but it seems way overly complex. Here is my new JS.
$(document).ready(function() {
$("#themes li ul").hide();
$("#themes li").hover(function() {
$("ul").show();
}, function() {
$("li ul").hide();
});
The markup looks like this:
<ul>
<li>Tier 1
<ul>
<li>Tier 2</li>
<li>Tier 2</li>
</ul>
</li>
<li>Tier 1
<ul>
<li>Tier 2</li>
<li>Tier 2</li>
</ul>
</li>
</ul>
My script works alright. But it shows all of the child ul's when any parent li is hovered, and it hides all the child ul's when unhovered. Just not sure how I can get it to A.) Only .show the li > ul when that specific li is hovered. And B.) Hide the shown li > ul only when another one is hovered (not itself). Example + explanation would be especially helpful! Thanks!!
Why can't you use the JQuery UI Accordion. This will solve your problem. The js is and the html is very simple here
<div id="accordion">
<h3>First header</h3>
<div>First content</div>
<h3>Second header</h3>
<div>Second content</div>
</div>
jQuery(document).ready(function(){
$('#accordion').accordion();
});
EDITED
The issue with your code is it hides and displays all the 'ul' components inside any 'li' components on hover of any one li. Here is the code to solve this issue, this will hide/show the 'ul' which comes inside the current 'li'
$(document).ready(function() {
$("#themes li ul").hide();
$("#themes li").hover(function() {
$(this).find("ul").show();
}, function() {
$(this).find("ul").hide();
});
});