I'm new to JQuery, I know this question is already answered in other posts but please help me on this,
How can i change the class of <li> tag if a link <a> is clicked?
<li class="link" id="home" >
Home
</li>
<li class="link" id="flt" >
FLT
</li>
This is what i have tried so far:
$('li').click(function() {
$("li.active").removeClass("active");
$(this).addClass('active');
});
Please explain me the answer, other posts that is similar to mine doesn't have that much detail so i really don't understand how they do that?
When you click on the element, the actual click target is the a element whose default action is to navigate to the resource specified in the href property.
In this case you are registering the click event in the li event, this handler is getting triggered because of event bubbling where an event happening in a descendant element will get bubbled upto the document root.
So the solution here is to prevent the default action of the click event(in this case the navigation of the a element) by calling the .preventDefault() on the event.
var $lis = $('li').click(function(e) {
$lis.filter(".active").removeClass("active");
$(this).addClass('active');
e.preventDefault()
});
Use the following script. http://jsfiddle.net/czG8h/
$('.link a').click(function() {
$("li.active").removeClass("active");
$(this).closest('li').addClass('active');
});
If you want to persist the active style across the page, then following code will do the trick for you:
$(document).ready(function() {
var pageTitle = window.location.pathname.replace( /^.*\/([^/]*)/ , "$1");
///// Apply active class to selected page link
$('.link a').each(function () {
if ($(this).attr('href').toLowerCase() == pageTitle.toLocaleLowerCase())
$(this).closest('li').addClass('active');
});
});
Use .closest to get to parent li and add the class active then use siblings to find other li and remove the class active, and use e.preventDefault() to prevent changing page.
$('li a').click(function(e) {
e.preventDefault();
$(this).closest('li').addClass('active').siblings('.active').removeClass('active');
});
DEMO
Related
I've got a toggle function like this:
$('ul.internal-nav-list li ').on('click', function () {
$(this).find('.internal-sub-list li ').toggle();
The issue is that when you click to toggle the submenu the page jumps to the top. So I tried using
$('ul.internal-nav-list li ').on('click', function (e) {
$(this).find('.internal-sub-list li ').toggle();
e.preventDefault();
Which fixes the problem, however then the links of the submenu don't work.
Does anybody know a workaround this?
Update
this is the html
<ul class="internal-nav-list">
<li>applications
<ul class="internal-sub-list">
<li>Structures</li>
<li>Containment Areas</li>
<li>Pumps</li>
<li>Heat Exchangers</li>
</ul>
</li>
There might be a better way, but without HTML it is harder to help you out. But you can check to make sure it is not an anchor being clicked
if (!$(e.target).is(".internal-sub-list a")) {
e.preventDefault();
}
Add e.preventDefault() on the anchor links that doesn't need to be active links (I believe in your li you have also an a href="#" element).
As a global fix you can have something like:
$('a[href="#"]').on('click', function(e) {
e.preventDefault();
});
This seems like a simple issue but it is frustrating me. I want to be able to click multiple items in a dropdown list that contains checkboxes without collapsing the list. I've tried a variety of event handlers on the ul, li, and a elements with no luck. These include e.preventDefault(), e.stopPropogation(), and preventing the closing of the ul through the 'hide.bs.dropdown' event as per this answer.
My list items:
<li class="serviceListItem">
<a class="serviceListItemLink">
<input class="checkService" type="checkbox" value="">
</a>
</li>
and my current set of event handlers. I've tried most combinations of these.
$('#serviceDropdown').on('hide.bs.dropdown', function() {
return false;
});
$('.serviceListItemLink').click(function(e) {
console.log('you clicked a service');
e.stopPropogation();
e.preventDefault();
});
$('.serviceListItem').click(function(e) {
e.stopPropogation();
e.preventDefault();
});
I should add my UL has the #servicesDropdown ID. Thanks for all your help in advance SO.
Is that the code you have tried? In that case, you have misspelled "propagation".
It should be:
e.stopPropagation();
...and not:
e.stopPropogation();
I would like to know if some one can improve my code... Using jQuery I'm trying to apply a class on the element we just click and disable this class on the other elements.
You will se in my code that I'm trying to apply a class on the I just clicked and remove all the class on the others elements.
But for the moment, I'm doing it the "easy and mega long way" as you can see in $("choice1-1").click(function()
Can some help me with a code that could detect all the others ID ?
Here my code for the moment
$(document).ready(function()
{
$('#stick-question-1').mouseenter(function()
{
$('#stick-choices-1').show();
});
$('#stick-choices-1').mouseleave(function()
{
$('#stick-question-1').show();
$('#stick-choices-1').hide();
});
$("choice1-1").click(function()
{
$(this).addClass('hover-etat');
$("#choice1-2").removeClass('hover-etat');
$("#choice1-3").removeClass('hover-etat');
$("#choice1-4").removeClass('hover-etat');
});
});
And my HTML is like this
<div id="stick-choices-1" class="stick-choices">
Under 3'9
4' to 5'2
5'3 to 5'7
5'8 and more
</div>
Just use:
$("#stick-choices-1 a").click(
function(e) {
e.preventDefault();
$('.hover-etat').removeClass('hover-etat');
$(this).addClass('hover-etat');
});
I've changed your initial selector, so that the click event is triggered by clicking any of the links within the #stick-choices-1 div element, it prevents the default action of clicking the link (assuming that you want the default to be stopped), removes the hover-etat class from any element that has that class, and then applies that class-name to the this element.
It may, though, make sense to restrict the scope in which jQuery searches for elements with the hover-etat class, to those elements within the same #stick-choices-1 element, rather than the whole document:
$("#stick-choices-1 a").click(
function(e) {
e.preventDefault();
$('#stick-choices-1 .hover-etat').removeClass('hover-etat');
$(this).addClass('hover-etat');
});
Or:
$("#stick-choices-1 a").click(
function(e) {
e.preventDefault();
$(this).siblings('.hover-etat').removeClass('hover-etat');
$(this).addClass('hover-etat');
});
It will works fine :
$("#choice1-1").click(function(){
$(".stick-choices a").each(function(){
$(this).removeClass(".hover-etat");
});
$(this).addClass(".hover-etat");
});
This should do it, and registers this handler for all of the links.
$('#stick-choices-1 > a').click(function(ev) {
$(this).addClass('hover-etat').siblings().removeClass('hover-etat');
...
});
Note the use of .siblings() to ensure that only the links that are in the same group are affected, and without sending an unnecessary class change to the clicked link.
This click event will work for all of the choices:
$('.stick-choices a').click(function(e){
$(this).siblings('.hover-etat').removeClass('hover-etat');
$(this).addClass('hover-etat');
});
$("a", $("#stick-choices-1")).click(function(){
$(".hover-etat").removeClass('hover-etat');
$(this).addClass('hover-etat');
});
May be something like this?
$('div.stick-choices a').on('click', function(e) {
e.preventDefault();
$(this).addClass('hover-etat').siblings('a').removeClass('hover-etat');
});
My webpage is at http://www.sarahjanetrading.com/js/resume
All the HTML, CSS and jQuery code + images are available there for anyone to access.
My issue is that currently my jQuery code makes the tabs show the tab-content when I click on the achor tag of the tab. But the tab doesnt change into the clicked tab.(tab name remains the same).
And the tab changes into the clicked tab when i click on the respective li of the tab. What I want is that both the tab changes and the content of the tab shows when I click on the either the li of the tab or the anchor of the tab.
You have two lots of events registered. One on the anchors and the other on the lis. The one on the lis changes the active state for the tabs themselves while the one on the anchors change the content. You should combine these into one function.
You change check the li function is working by clicking on the very bottom edge of it. Because your anchor javascript has a return false feclaration it is preventing the click event bubbling up to the li, thus not showing the change.
Try changing the function:
$("ul.tabs li a").click(function() {
$("ul.tabs li > a").removeClass("active");
$(this).addClass("active");
$("#wrap > div").hide();
var activeTab = $(this).attr("href");
$(activeTab).show();
return false;
});
to the following:
$("ul.tabs li a").click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
$("#wrap > div").hide();
$(".active-tab").removeClass();
$(this).parent().addClass("active-tab");
var activeTab = $(this).attr("href");
$(activeTab).show();
return false;
});
This should work and you should be able to remove your other javascript function.
If you already use jQuery you can use the jQueryUI library to create tabs. It is very simple and the style can easily be changed. Here is the Tutorial for tabs:
jQuery UI - Tabs Demo
If you click the whitespace around the text in the tabs, it works. Remove the anchor link from inside the tab, or add a click handler for the anchor link.
Edit:
My mistake. You have a click handler on your anchor element, but clicking the anchor link causes it to become $(this) in your code. So you assign class="active" to the anchor, when you want to assign it to the li.
$(this).addClass("active");
should be rewritten to modify the li. Personally, I would wrap the li in the anchor link:
<li></li>
This will probably require modifying your JS code a little, but will give a uniform result.
I want to get the handle of the currently clicked link in jquery. Suppose, I have a bunch of li a elements:
HTML
<ul id="navigation" class="main_menu">
<li>Home</li>
<li>Story</li>
<li>Mantra</li>
<li>Showcase</li>
<li>Experience Us</li>
</ul>
jquery
$(document).ready(function() {
$("#navigation").localScroll({
hash: false,
onAfter: function(e, anchor, $target) {
// some magic code here, to get the anchor element which was clicked
// how do I use the 'e', 'anchor' and '$target' parameter to get the anchor?
}
}
});
If you could just alert() the anchor text or href, I'll be on my way...
Please note: I don't want to set hash: true for some reason.
You should just be able to add another click() event to the a elements. Is there a reason it needs to be done inside the localScroll()?
$('#navigation a').click(function() {
alert($(this).attr('href'));
});
Or if you don't want the default behavior of clicking the a element, use the following:
$('#navigation a').click(function(event) {
event.preventDefault();
alert($(this).attr('href'));
});