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.
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 list I am trying to collapse and am having trouble once I get lower in the hierarchy. Here is my html:
<ul class="list">
<li>
<a>Categories</a>
<ul>
<li>
<a>Parent</a>
<ul>
<li><a>Child</a></li>
<li><a>Child</a></li>
<li><a>Child</a></li>
</ul>
</li>
<li>
<a>Parent</a>
<ul>
<li><a>Child</a></li>
<li><a>Child</a></li>
<li><a>Child</a></li>
</ul>
</li>
<li>
<a>Parent</a>
<ul>
<li><a>Child</a></li>
<li><a>Child</a></li>
<li><a>Child</a></li>
</ul>
</li>
<li>
<a>Parent</a>
<ul>
<li><a>Child</a></li>
<li><a>Child</a></li>
<li><a>Child</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Heres my jquery
$( document ).ready(function() {
$('.list > li a').click(function(){
$(this).parent().find('ul').toggle();
});
});
And here is a jfiddle: http://jsfiddle.net/u7bczqup/
Once you click on Categories the Parents come down. When this happens, all the children of the parents are shown and not hidden. Why are these ones not hidden? Ive tried adjusting my jquery but that causes it to not work at all.
They are not hidden because jquery find searches any descendants below it and then you are toggling them, you should use children().
Try this:
$(this).parent().children('ul').toggle();
http://jsfiddle.net/u7bczqup/1/
https://api.jquery.com/children/
Give this a shot.
JS:
$( document ).ready(function() {
$('.list > li a').click(function(){
$(this).next('ul').toggle();
});
});
The issue with using .find() is that it is finding all the ul element. You can check this by adding this line: console.log($(this).parent().find('ul')); This will print all the ul tags it is "finding" to the console. Because it is finding all of them, it is toggling all of them.
You're searching for all unordered list elements in the method .find('ul') that are direct descendants.
It should be .find('ul:first-child') ore more precisely .children(ul:first) so it would be
$( document ).ready(function() {
$('.list > li a').click(function(){
$(this).parent().children('ul').toggle();
});
});
for more refer to jquery find method
I have been using flaunt.js ( Original Source, but have modified the initial css and html.
I have removed the class styles from ul and li so it uses just list tags.
But for some reason when I go into mobile.. it shows the 3 line menu button on my local page, but when I click it... things don't work as they do on the source.
I can't see the the menu properly.. I can't see the arrow to show there are drop down.
If someone could assist
thanks
<nav class="nav">
<ul>
<li>
Home
<ul>
<li >
Submenu item 1
</li>
<li >
Submenu item 2
</li>
<li >
Submenu item 3
</li>
<li >
Submenu item 4
</li>
</ul>
</li>
<li>
About
</li>
<li>
Services
<ul>
<li >
Submenu item 1
</li>
<li >
Submenu item 2
</li>
<li >
Submenu item 3
</li>
<li >
Submenu item 4
</li>
</ul>
</li>
<li>
Portfolio
</li>
<li >
Testimonials
</li>
<li>
Contact
</li>
</ul>
</nav>
Fiddle
You've removed necessary HTML and haven't compensated for that in the JS
Original JS:
// Append the mobile icon nav
$('.nav').append($('<div class="nav-mobile"></div>'));
// Add a <span> to every .nav-item that has a <ul> inside
$('.nav-item').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');
Your modified JS:
// Append the mobile icon nav
$('.nav').append($('<div class="nav-mobile"></div>'));
// Add a <span> to every .nav-item that has a <ul> inside
$('.nav').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');
See how your selector targets the .nav on both lines? This is adding the span in a place the rest of the script isn't expecting. In your JS to change the selector back to .nav-item and add the .nav-item class back to the root level <li>s.
You will also need to change:
// Dynamic binding to on 'click'
$('ul').on('click', '.nav-click', function(){
To:
// Dynamic binding to on 'click'
$('.nav-list').on('click', '.nav-click', function(){
There is more than one <ul> in your markup, so your blanket binding the click to <ul> is disrupting things too.
EDIT: Modified HTML, CSS, and JS: http://jsfiddle.net/xtt3j/. I'm not sure why you're so keen on doing everything without any classes. I'm all about reducing markup but I feel like this is going to be a harder to maintain (or to just wrap your head around). And finally, the arrow won't display in any of these Fiddles because it is an image.
I have modified your example code on http://jsfiddle.net/WdN8J/10/. In Chrome, there is initial padding offset so I put -webkit-padding-start: 0px. The conflict is that your dropdown nav has absolute position:
.nav ul > li > ul {
display:none;
position:absolute;
left:0;
width:180px;
}
So I added the following line in the click action:
$('.nav ul > li > ul').css({'position':'relative', 'width':'100%'});
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');
});
});
i have a navigation menu on top of my website .that li's content many pages with different urls. How to Add Active Class to a Navigation Menu Based on URL that in each page display it with a specific color?
<ul>
<li class="red">HOme</li>
<li>gallery</li>
<li>about</li>
<li>contact</li>
</ul>
This snippet will be useful
HTML
<ul id="menuList">
<li>Home</li>
<li>gallery</li>
<li>about</li>
<li>contact</li>
</ul>
JS
$('#menuList li').click(function(e){
e.preventDefault(); //Remove this in your main code
$('#menuList li').removeClass("active");
$(this).addClass("active");
});
CSS
.active{
background-color:green;
}
WORKING EXAMPLE
Give a class or ID to the ul. Then, assuming jQuery and an ID of nav:
$(function() {
$('#nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});
All you need then is to style the .active class. Also, this assumes your links are /my-page, so if you are currently in my-page, the link will become .active.