Change class name of anchor tab inside list - javascript

I have a small query.
<ul class="navigation">
<li>Home<span class="ui_icon home"></span></li>
<li>About Us<span class="ui_icon aboutus"></span></li>
<li>Services<span class="ui_icon services"></span></li>
<li>Gallery<span class="ui_icon gallery"></span></li>
<li>Contact Us<span class="ui_icon contactus"></span></li>
</ul>
this code I got from internet, it's like on click only the page scrolls to the next content.
and the selected list item updates itself. But when I try to implement this template in my Asp.net masterpage, the list items does not get updated. so what can I do?
Any suggestion?
below is the CSS default provided by the template
ul.navigation a:hover, ul.navigation a.selected {
color: #201f1b;
background: url(../images/templatemo_menu_hover.png) no-repeat left;
}

If you want to set the class selected to the clicked anchor and remove it from other anchor, then use:
$('.navigation li a').click(function(e) {
e.preventDefault();
$('.navigation li a').removeClass('selected');
$(this).addClass('selected');
})
Fiddle Demo

If you want to use the 'on click' function to remove and add the class on elements, try the code below:
$(".navigation li a").on("click", function (event) {
//prevents the browser from going to a new URL
event.preventDefault();
//removes selected class from all elements
$('.navigation li a').removeClass('selected');
//adds selected class to element you click
$(this).addClass('selected');
});
I do not have access to your image so I used the background-color parameter in the css
jsfiddle example: http://jsfiddle.net/9Jjud/

Related

toggle active on nav-tabs

$('.active').click(function() {
$(this).toggleClass('active');
$(this).toggleClass('active');
});
I know this is totally wrong but I'm new and trying to learn; What I'm trying to do is toggle the active class for the <li> onclick() really appreciate any help. Thankyou.
<ul class="nav nav-tabs">
<li role="presentation" onclick="toggleClass();">Hi</li>
</ul>
You need to create a function toggleClass
JS
Create a new function toggleClass which will accept the current clicked element
function toggleClass(elem) {
$(elem).toggleClass('active');
};
HTML
add toggleClass function to onclick handler & pass the current element as an argument
<li role="presentation" onclick="toggleClass(this);">Hi</li>
CSS
Create a class .active
.active {
background: yellow;
}
DEMO
What you need to do is set all other elements's classes to inactive,
$('.active').className = 'inactive';
$(this).className = 'active';
That top expression will affect all elements with the class and the bottom one will change the current clicked element.
try this:
$("nav li").click(function() {
$(this).toggleClass("active");
});
if only for <li> elements with active class
$("nav li.active").click(function() {
$(this).toggleClass("active");
});
This is not how Bootstrap is supposed to work. If you are using bootstrap, use their tab js component. more on it here
Basically you add a listener on those LI tags like this: (from the docs)
$('.nav.nav-tabs li').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
The way you did, you were toggling the state twice so in the end it would stay the same.
I think instead of $('.active').click(function()), you should target li click as
$( "li" ).click(function() {
$(this).toggleClass("active");
});
fiddle:
http://jsfiddle.net/wVVbT/142/
Here is a link for description about how to use .toggleClass.
toggleClass: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
DEMO:
$('li').click(function() {
$(this).toggleClass('active');
})
ul li{
float: left;
margin-right: 20px;
}
.active {
background: #69a;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li> Link A</li>
<li>Link B</li>
</ul>

jQuery Updating Class on Parent Item

I have the following layout:
<ul id="header">
<li id="item1" class="off"> <a>Abc</a> </li>
<li id="item2" class="off"> <a>Abc</a> </li>
</ul>
When I click on a href as in the <a> I want the class in the <li> for that to be updated.
I've tried the following with no luck:
$(".header > li a").click(function(){
$(".header li a.current").removeClass("off");
$(this).addClass("on");
});
Any ideas?
--EDIT:
Ok i just realized I'm not looking at this correctly.
So when clicking on that link a new page loads. So using the click function is wrong because a new page loads so whatever changes to the class i have will be lost. What i therefore need is to use the $(document).ready(function() to say something like "I clicked on li with id from the previous page so now update that class"
So
Thanks!
You can use closest() to get the parent li and then add the class:
$(this).closest("li").addClass("on");
you also need to use id selector $("#header") not class selector $(".header"):
$("#header > li a").click(function(){
$("#header li a.current").removeClass("off");
$(this).closest("li").addClass("on");
});
FIDDLE DEMO
USe
$(".header > li a").click(function(){
$(".on").removeClass("on");
$(this).closest("li").addClass("on");
});
Working fiddle http://jsfiddle.net/LDC69/1/
$("#header > li a").click(function(){
$(this).parent().removeClass("off").addClass("on");
});
Its events chaining.
Look li is ID not CLASS.
Demo
Your selector is wrong $(".header") . In your html code <ul id="header"> so you have to use id selector $("#header")
$("#header li a").click(function (e) {
e.preventDefault();
$(this).parent().siblings().removeClass("on").addClass("off"); // Remove all class on and added off class
$(this).parent().removeClass("off").addClass("on"); // Select current parent element and remove off and added on class
});

how to find div with class inside in li with jquery

i have this HTML code
<ul>
<li>test1
<div class="sub-menu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</li>
<li>test2</li>
<li>test3</li>
<li>test4
<div class="sub-menu">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
</li>
</ul>
that div.sub-menu has hidden in css.
i want when hover in a find div that inside in parent li and show it,
i try in jquery but when hover in a tag show two sub-menu div,
i want when hover in test1 show div.sub-menu that have 1,2,3,4
and when hover in test4 show div.sub-menu that have a,b,c,d
You can attach a handler for the mouseenter and mouseleave events that manipulates the associated sub-menu, for example like this:
$(document)
.on("mouseenter", "ul > li > a", function() {
$(this).siblings(".sub-menu").show();
})
.on("mouseleave", "ul > li", function() {
$(this).children("a").next(".sub-menu").hide();
});
This snippet installs delegated event handlers that show and hide the sub-menus -- note that the "hide" trigger is different from the "show" trigger because we don't want the menu to disappear as soon as the mouse pointer moves off the anchor. See it in action.
However depending on the desired result you might also be able to do this with pure CSS, e.g.
ul > li > a + .sub-menu { display: none }
ul > li:hover > a + .sub-menu { display: inline-block }
See it in action.
Both versions are structured so that they work also for nested sub-menus.
Simply hide/show the sub-menu on mouseover/mouseout:
Javascript
$("li").mouseover(function(){
$("ul", this).show();
});
$("li").mouseout(function(){
$("ul", this).hide();
});
JS Fiddle: http://jsfiddle.net/EDufY/
If You want to display menu on hover effect of li then i think u don't need javascript.
if u change css then it is posiible.
write your css like.
.sub-menu
{
display:none;
}
li:hover .sub-menu
{
display:block
}
And you have multilevel menu then give them id and repate above procedure
Try this with slide effect, http://jsfiddle.net/SmtQf/1/
$(function () {
$('ul li').hover(
function () {
$('.sub-menu', this).stop(true, true).slideDown(); /*slideDown the subitems on mouseover*/
}, function () {
$('.sub-menu', this).stop(true, true).slideUp(); /*slideUp the subitems on mouseout*/
});
});

How to find a parent's child with jQuery?

I have a menu that looks like this:
<ul class="menu">
<li>zing</li>
<li>
page
<ul>
<li>foo</li>
<li>bar</li>
</ul>
</li>
</ul>
I'd like the sub menu to fadeIn when I hover over the page link.
This is my code so far but for some reason it's not working and I don't think this is the correct way to achieve this anyways:
$('.menu li a:nth-child(2)').hover(function(){
$('.menu li ul').fadeIn(150);
}, function(){
$('.menu li ul').fadeOut(150);
});
Anyone know how I can reach my goal according to best standards to make the submenu of the 2nd li to appear when I hover over page?
It would probably be a good idea to have your hovers only apply to menus that have a submenu. You could do something like this:
$('.menu > li > a').filter(function(){
if( $(this).siblings('ul').length ){ return true; }
}).hover(
function(){ $(this).siblings('ul').fadeIn(150); }
,function(){ $(this).siblings('ul').fadeOut(150); }
);
The nth-child selector needs to be applied to the <li> element not the <a>.
$('.menu li ul li:nth-child(2)').hover(function(){
$('.menu li ul').fadeIn(150);
}, function(){
$('.menu li ul').fadeOut(150);
});
Fiddle: http://jsfiddle.net/9u3V7/
Check this fiddle out: http://jsfiddle.net/vPLAc/3/
No need for counting children that way. Every list item with a submenu will react to this code.

Toggle and animate height of a ul within a li

I have a list inside a li which needs to slide into view when the parent li is clicked.
My code works nicely but if i click any li all of the sub lists show where as i want it only to apply to the one that was clicked...
$("#offering li").click(function() {
$("#offering li ul").animate({height: "toggle"}, 1000);
});
<ul id="offering">
<li class="t current"><span>sage solutions</span>
<ul>
<li>50</li>
<li>200</li>
<li>CRM</li>
</ul>
</li>
<li class="m"><span>solutions</span>
<ul>
<li>50</li>
<li>200</li>
<li>CRM</li>
</ul>
</li>
<li class="b"><span>third party additions</span></li>
</ul>
$(this).find("ul").animate({height: "toggle"}, 1000);
Here you are applying the animation to all elements that match the selector #offering ul li, when infact you just need to apply it to the child ul of the li clicked.
Instead of the following
$("#offering li").click(function() {
$("#offering li ul").animate({height: "toggle"}, 1000);
});
Try this
$("#offering li").click(function() {
this.childNodes[0].animate({height:"toggle"},1000);
});
I'm not as familiar with jQuery as I am with Mootools, so there may be a more appropriate way to get the child ul element than using the childNodes array - but you get the idea.

Categories

Resources