I wanted to make current selected menu highlighted using jquery
Following is my jquery code
$('ul li a').click(function() {
$('li').removeClass();
$(this).parent().addClass('active');
});
.active {
background-color: #d90000;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="dropdown">
Meetings
<div class="dropdown-content">
Meeting Overview
Meeting Details
</div>
</ul>
Please help
$('ul li a').click(function() {
//$('li').removeClass();
//$(this).parent().addClass('active');
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass("active");
});
.active {
background-color: #d90000;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="dropdown">
Meetings
<div class="dropdown-content">
<li> Meeting Overview </li>
<li> Meeting Details </li>
</div>
</ul>
If you are trying to make sub menu use this
$(document).ready(function(){
if (localStorage.getItem('current_page')) {
var page = localStorage.getItem('current_page');
$('ul li').removeClass('active');
$('ul li[data-page="'+page+'"]').addClass('active');
}
});
$('ul li > a').click(function() {
$('li').removeClass('active');
$(this).parent().addClass('active');
var page = $(this).parent().attr('data-page');
localStorage.setItem('current_page', page);
});
In your code, $(this).parent() is your <li> element only when you click your first link, links under dropdown-content div have not an <li> parent, so, the removeClass() function is not working as you expected.
Please, changethis and tell us if your code works as you expect.
Try this
$('ul li a').click(function() {
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass("active");
});
ul li{
list-style-type:none;
float:left;
display:inline-block;
margin:0 10px;
padding:5px;
}
ul li.active{
background:pink;
}
li a{
text-decoration:none;
outline:0;
}
ul li.active a{
color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li class="dropdown">
Menu1
</li>
<li class="dropdown">
Menu2
</li>
</ul>
This can´t work as expected. The problem is, you click the link () the current li elemet gets the class "active" and then the page refreshes because the link redirects you, which removes the active class from the current li element.
What you can do is teh following:
Option 1: Get the current path from the url
When the page gets loaded, you can extract the path and add the active class to the li that contains the link:
$(document).ready(function() {
var currentPath = window.location.pathname;
$('a[href="'+currentPath+'"]').partent().addClass("active");
});
This will find the link with the currentPath and add the class active to the corresponding li element.
You also need to wrap all links in separate list-elements:
<ul>
<li class="dropdown">
Meetings
<div class="dropdown-content">
<ul>
<li>Meeting Overview</li>
<li>Meeting Details</li>
</ul>
</div>
</li>
</ul>
Option 2: Add the active link name as Query Param
You can append a query param to your links like this:
<li class="link home">
Meeting Overview
</li>
<li class="link usermeetings">
Meeting Details
</li>
In your javascript you can then get the page param and add the active class like this:
$(document).ready(function() {
var page = $.url().param('page');
$('.link').find('.' + page).addClass('active');
});
Related
I want to open child UL on parent LI click. Problem is that i have links to subpages on parent LI, which needs to be disabled so they don't redirect to subpage, but rather to expand child UL. Where there is no child UL, links on parent LI work normaly.
Code bellow works for disabling default URL and expands child UL, but it also disables child UL LI URL's, which should not.
So when i click on "No child" it should send me to yahoo, but when i click on Yes child it should expand child UL.sub-nav and links in .sub-nav li should work normaly.
Hope it's clear enough
Here's HTML
<nav>
<ul>
<li>No child</li>
<li>Yes child
<ul class="sub-nav">
<li>submenu1</li>
<li>submenu2</li>
</ul>
</li>
<li>No child</li>
</ul>
</nav>
and JS
$("nav ul li ul").css("display", "none");
$("nav li a").click(function (e) {
e.preventDefault();
$(this).next('ul').slideToggle();
});
Fiddle here
You can target only anchor elements which has a ul to display
$("nav li:has(ul) > a").click(function(e) {
e.preventDefault();
$(this).next('ul').slideToggle();
});
nav ul ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>No child
</li>
<li>Yes child
<ul class="sub-nav">
<li>submenu1
</li>
<li>submenu2
</li>
</ul>
</li>
<li>No child
</li>
</ul>
</nav>
I have ul.menu for which few li are styled differently, therefore those li dont need to add active class.
<ul class="menu">
<li id="1st" class="default">Text1</li>
<li id="2nd" class="default">Text2</li>
<li class="cross-out">Text3</li>
</ul>
jQuery to add active class for first two links, except li.cross-out
$('ul.menu li').click(function(){
$('ul.menu li').removeClass('active');
$(this).not('cross-out').addClass('active');
});
What is wrong? Hope I was clear enough...
You forgot the class identifier before cross-out:
$('ul.menu li').click(function(){
$('ul.menu li').removeClass('active');
$(this).not('.cross-out').addClass('active');
});
The period makes all the difference. Then because you may have several other ul.menu elements on your page, you just want the one whose li was clicked to change:
$('ul.menu li').click(function(){
$(this).siblings('li.active').removeClass('active');
$(this).not('.cross-out').addClass('active');
});
$('ul.menu li').click(function(){
$(this).siblings('li.active').removeClass('active');
$(this).not('.cross-out').addClass('active');
});
.active {
background-color:gray;
font-weight:bolder;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li class="default">Text1</li>
<li class="default">Text2</li>
<li class="cross-out">Text3</li>
</ul>
<ul class="menu">
<li class="default">Text1</li>
<li class="default">Text2</li>
<li class="cross-out">Text3</li>
</ul>
<ul class="menu">
<li class="default">Text1</li>
<li class="default">Text2</li>
<li class="cross-out">Text3</li>
</ul>
Jquery has a toggle class function
$("#td_id").toggleClass('default active');
related post jquery change class name
I have a menu with their submenus too. After the page loads.. The website generates random texts after every end of submenus..
This is the current markup that is generated from firebug:
<nav class="shopMenuHover">
<div id="bx_incl_area_5_1">
<ul>
<li><a href="#" >First Menu</a>
<div class="" style=""><h2>First Sub Menu</h2>
<ul>
<li>
Sub Menu > Sub Menu
</li>
<li>Sub Menu > Sub Menu 90797</li>
</ul>
</div>
</li>
<li class="firstLevel hasSubmenu instrumentarium-en-fresen">
Second Menu
<div><h2><a href="">Second Menu</h2>
<ul>
<li><font><font>Sub Menu > Sub Menu</li>
<li>Sub Menu > Sub Menu 896346</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
Problem: The texts 90797 and 896346 are texts generated randomly by the website. How can I remove these texts after every last li > a inside every ul?
This is the current jquery i used to select only the text inside a tag:
<script type="text/javascript">
$(document).ready(function() {
$(".shopMenuHover ul li:last-child > a").css( "border", "2px solid red");
});
</script>
Output: Remove all texts after a tag of every last li-last-child..
Please Help Me...
You can select all the nodes, including the textnodes, with contents(), then use filter() to get just the textnodes outside the anchors, and remove them
$(".shopMenuHover ul li:last-child").contents().filter(function() {
return this.nodeType === 3;
}).remove();
FIDDLE
Here is a way to do this with CSS using the visibility property :
DEMO
.shopMenuHover ul li:last-child{
visibility:hidden;
}
.shopMenuHover ul li:last-child > *{
visibility:visible;
}
note : use the * selector so it works even if the <li> contains something else than a link.
Another option would be to set the html of the li to just the a.
$(".shopMenuHover ul li:last-child").each(function(){
var $this = $(this);
$this.html($this.children("a"));
});
http://jsfiddle.net/ujrp151h/1/
This would also clear anything else within the element other than the a, not just text nodes.
I have a page with this URL: http://localhost:8000/progress/c/?l=1&c=1
And the below content to work as a simple css menu bar.
<div class="menu_div">
<ul>
<li> l1c1 </li>
<li> l1c1 </li>
<li> l1c1 </li>
<li> l1c1 </li>
</ul>
</div>
CSS styling is
.menu_div ul
{
padding:6px;
margin:0px;
font-size:12px;
list-style:none;
text-indent:15px;
}
.menu_div ul li
{
line-height:28px;
border-bottom:1px solid #000;
}
.menu_div ul li a
{
text-decoration:none;
font-color:#3A332D;
display:block;
}
.menu_div ul li a:hover
{
background:blue;
}
.menu_div ul li#active
{
background:blue;
}
When I hover over the links the background color changes but the currently selected menu link is not highlighted in blue.
I'm using django framework.
Try this jQuery code, it will add the class automatically
$(function(){
var url = window.location.href;
$("#menu a").each(function() {
if(url == (this.href)) {
$(this).closest("li").addClass("active");
}
});
});
In your CSS you have a class with the id 'active', this should probably be a class like this:
.menu_div ul li.active
{
background:blue;
}
Further, I wouldn't recommend trying to match the 'active' or better formulated 'current' page using javascript client side.
Instead your script on the server should recognize the current page and add a class to the related menu item so it would look like this:
<li class="active"> l1c1 </li>
Replace your id #active to class .active - that is more right way:
.menu_div ul li.active
{
background:blue;
}
and add this class to active element in your list:
<div class="menu_div">
<ul>
<li class="active"> l1c1 </li>
<li> l1c1 </li>
<li> l1c1 </li>
<li> l1c1 </li>
</ul>
</div>
.menu_div ul li#active
It says the active link needs an id of active. I see no id, hence why it is not blue.
If you want the link to be active, you are going to have to set the item to be active, the browser will not do it for you.
Just
css
.menu_div ul li.active{background:blue}
html
<div class="menu_div">
<ul>
<li id="page1"> l1c1 </li>
<li id="page2"> l1c1 </li>
<li id="page3"> l1c1 </li>
<li id="page4"> l1c1 </li>
</ul>
</div>
script
#In every page just put this script and change the id
<script>$("#page1").addClass('active');</script>
i have this html menu:
<ul id='main'>
<li class='active current' id='lighty'>
<a href='/'>Lighty</a>
<ul>
<li class='sub'>
<a href='/'>Hem</a>
</li>
</ul>
</li>
<li id='community'>
<a href='/community'>Community</a>
</li>
</ul>
And this jquery:
$("#menu ul > li").mouseenter(function(){
id = $(this).attr("id");
$("#menu #main li").removeClass("active");
$(this).addClass("active");
}).mouseleave(function(){
id = $(this).attr("id");
menu.timers[id] = setTimeout(function(){$("#menu #main li#"+id).removeClass("active");}, 2000);
});
What i am trying to acomplish is that when i hover one of the li's in the main ul the child ul of that li should be displayed. and when i move the mouse out of the li or the child ul the menu should be visible for 2 seconds.
It works through the main li button but if on the child ul and move out it just disapears, it doesnt wait for two seconds.
The waiting two seconds is so you can go in to the menu if you accidentaly move the mouse out of it.
Can anybody help me to fix this error? Maybe you have a better solution?
Here is also a screenshot on how the menu looks if it helps:
screen shot under or click here
is this what you mean?
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$(function() {
$("ul#main > li").mouseenter( function(){
$("#main li").removeClass("active");
$(this).addClass("active");
}).mouseleave(function(){
setTimeout( function()
{
$("#main li").removeClass("active");
}, 2000);
});
});
//-->
</script>
<style type="text/css">
#main li ul {
display: none;
}
#main li.active ul {
display: inline;
}
</style>
<ul id="main">
<li id="lighty">
Lighty
<ul>
<li class="sub">
Hem
</li>
</ul>
</li>
<li id="community">
Community
<ul>
<li class="sub">
more
more1
more2
more4
</li>
</ul>
</li>
</ul>