I have two buttons inside a list and I want to be able to switch a class between them on click.
I'm a beginner on Jquery and wrote some lines but it doesn't seem to work, even though everything is correctly linked according to Chrome's console.
Here's the html :
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
and here's the corresponding Jquery :
$('.tab a').click(function) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
Thanks in advance !
So it seems to be working now, partially, it doesn't work in my full HTML page but it does when using only the <ul>, so i'll redo it from the beginning and find where it goes wrong.
Thanks a lot for all of your answers !
You had a syntax error - it should be $('.tab a').click(function() {
If you want to use the event object (e.preventDefault() in your code) you should add it to the function declaration - function(e) {, otherwise the e variable is not defined.
Here is the fix to your code:
$('.tab a').click(function(e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
.active {
background: blue;
}
.active a {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tab-group">
<li class="tab active">Sign Up</li>
<li class="tab">Log In</li>
</ul>
Related
I'm trying to add "active" class to menu when user clicks on the button but for some reason it's not working correctly. They have to click really fast and two times. I've tried both click and on click function but still not working.
$('#menu li').click(function() {
$('#menu li.active').removeClass('active');
$(this).addClass('active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" id="menu">
<li class="nav active">Home
</li>
<li class="nav">About
</li>
<li class="nav">Services
</li>
<li class="nav">Gallery
</li>
<li class="nav">Contact
</li>
</ul>
</div>
you must handle active li after page loaded.Add this at the end of your code:
var curruntLocation = window.location.href;
$('#menu li a').each(function ()
{
var thisHref = $(this).attr('href');
if (curruntLocation.indexOf(thisHref) > 0)
{
$(this).parent().addClass('active');
}
});
The links included in the menu items are reloading the page while clicking and when the page is reloaded, the initial setting comes first. You can use preventDefault() if you'd like to run the function but then, your links won't work.
I suggest you use anchors instead of query string.
I found a lot of questions about this, but I have problem with getting the single id of a nested li element, and I couldn't find answer for it. Here is my code:
$(function() {
$('ul').on('contextmenu', 'li', function(e) {
e.preventDefault();
console.log(this.id);
});
And here is my HTML:
<ul id="u-main-ul">
<li id="1"> 1
<ul id="u-1">
<li id="11">11</li>
</ul>
</li>
</ul>
The problem is that when I right click on the li element with id="11", on the console it writes "1 11". When click one li element it shows and the id of all others li tags that are placed before the clicked one.
I want to get the id only of the right-clicked li tag and nothing else.
You need to stop the event from bubbling up the tree:
$('ul').on('contextmenu', 'li', function(e) {
e.preventDefault();
e.stopPropagation();
console.log(this.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="u-main-ul">
<li id="1">1
<ul id="u-1">
<li id="11">11</li>
</ul>
</li>
</ul>
See the documentation for more info.
Try it with stopPropagation() like so
$(function() {
$('ul').on('contextmenu', 'li', function(e) {
e.stopPropagation();
console.log(this.id);
})
});
See the JSFiddle
I have an accordion, and I'm able able to open on each click, but how can I close it back again?
HTML:
<ul class="accordion">
<li id="one" class="files">
Calendar 1<span>10</span>
<ul class="sub-menu">
<li><em>01</em>Sub Menu<span>1</span></li>
</ul>
</li>
<li id="two" class="mail">
Calendar 2<span>20</span>
<ul class="sub-menu">
<li><em>01</em>Sub Menu<span>2</span></li>
</ul>
</li>
<li id="three" class="cloud">
Calendar 3<span>30</span>
<ul class="sub-menu">
<li><em>01</em>Sub Menu<span>3</span></li>
</ul>
</li>
<li id="four" class="sign">
Calendar 4
<ul class="sub-menu">
<li><em>01</em>Sub Menu</li>
</ul>
</li>
</ul>
Javascript:
$(document).ready(function() {
// Store variables
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu');
// Open the first tab on load
accordion_head.first().addClass('active').next().slideDown('normal');
// Click function
accordion_head.on('click', function(event) {
// Disable header links
event.preventDefault();
// Show and hide the tabs on click
if ($(this).attr('class') != 'active') {
$(this).next().stop(true,true).slideToggle('normal');
$(this).addClass('active');
}
});
});
Fiddle: http://jsfiddle.net/fuuLh494/
You dont need to explicitly check for active class occurence and then do add/remove decision of class. You can achieve this with toggleClass:
accordion_head.on('click', function(event) {
event.preventDefault();
$('.sub-menu').not($(this).next()).slideUp('normal').prev().removeClass('active');
$(this).next().stop(true,true).slideToggle('normal');
$(this).toggleClass('active');
});
Working Demo
You can remove the if completely, and use both slideToggle and toggleClass:
$(this).next().stop(true,true).slideToggle('normal');
$(this).toggleClass('active');
Updated Fiddle
if ($(this).attr('class') != 'active'){
//accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
//accordion_head.removeClass('active');
$(this).addClass('active');
} else {
$(this).next().stop(true,true).slideToggle('normal');
$(this).removeClass('active');
}
See the updated fiddle here: http://jsfiddle.net/9ev31v6w/
The best you can do with a tutorial is learn, and not copy&paste without read the code. It's as simple as this:
http://jsfiddle.net/fuuLh494/1/
I add else statement at the end of the script:
else {
$(this).next().stop(true,true).slideToggle('normal');
$(this).removeClass('active');
}
Replace all instances of addClass with toggleClass and remove the condition of if class is active.
We are trying to remove the class when the class is already added using toggleClass() and don't need any if condition block.
accordion_head.first().toggleClass('active').next().slideDown('normal'); // Changed
if ($(this).attr('class') != 'active') { } // Removed
$(this).toggleClass('active'); // Changed
Working JSfiddle
Again using this, the best place on the net, to try and resolve a question of a poor designer with extremely limited developer skills;
I have this js nav bar which I need to remain opened once I click on one of the links within the dropdown link. It's hard for me to explain but I'm sure once you see it you'll understand what I mean:
<div id="Nav">
<ul>
<li>Inicio</li>
<li>Historia</li>
<li>Quiénes</li>
</ul>
<ul id="nav">
<li>Galería
<ul class="SubLinks">
<li>Proyecto1</li>
<li>Proyecto2</li>
<li>Proyecto3</li>
</ul>
</li>
</ul>
<ul>
<li>Contacto</li>
</ul>
</ul>
</div>
JS
$(document).ready(function(){
$("#nav > li > a").on("click", function(e){
if($(this).parent().has("ul")) {
e.preventDefault();
}
if(!$(this).hasClass("open")) {
// hide any open menus and remove all other classes
$("#nav li ul").slideUp(350);
$("#nav li a").removeClass("open");
// open our new menu and add the open class
$(this).next("ul").slideDown(350);
$(this).addClass("open");
}
else if($(this).hasClass("open")) {
$(this).removeClass("open");
$(this).next("ul").slideUp(350);
}
});
});
Anyone can help?
Thanks guys!!
I have aJQuery accordian using the following JS.
function initMenu() {
$('#accordion ul').hide();
$('#accordion li a').click(
function() {
$(this).next().slideToggle('normal');
}
);
}
$(document).ready(function() {initMenu();});
And the following HTML
<ul id="accordion">
<li><a class="firstheading" href="#">Making words work</a>
<ul class="panelContent">
<li>
<p>IPSUM</p>
</li>
</ul>
</li>
<li><a class="heading" href="#">Full business-writing services</a>
<ul class="panelContent">
<li>
<p>IPSUM<p>
</li>
</ul>
</li>
</ul>
Can anyone tell me how to ensure the first item is opened when the page loads?
You can use the gt selector to specify the ul's with an index greater than zero, so every ul except the first.
Demo here
function initMenu() {
$('#accordion ul:gt(0)').hide();
$('#accordion li a').click(
function() {
$(this).next().slideToggle('normal');
}
);
}
$(document).ready(function() {initMenu();});
It should be opening automatically, but you can open up accordion pieces programmatically like so:
.accordion( 'activate' , index )
so to open up the first section, you would do
$('#accordion').accordion('activate',0);
You could put that in your document ready function. Note that a selector can also be used in place of the number, which represents each section from 0 onwards.
Source