I want to make a menu, and change the class when clicking.
When i click on the "li" with no class="active", i want jquery to add a class on the empty <li> and remove it from the othes "li".
<li class="active">data</li>
<li>data 2</li>
can somebody help me ? :)
I think you mean this:
$('li > a').click(function() {
$('li').removeClass();
$(this).parent().addClass('active');
});
// When we click on the LI
$("li").click(function(){
// If this isn't already active
if (!$(this).hasClass("active")) {
// Remove the class from anything that is active
$("li.active").removeClass("active");
// And make this active
$(this).addClass("active");
}
});
$('li').click(function()
{
$('li', $(this).parent()).removeClass('active');
$(this).addClass('active');
}
$(window).load(function(){
page=window.location.pathname.split("/").pop();
menuChildren = $('a[href="' + page + '"]');
$(menuChildren).parent('li').addClass('active');
});
The above code will look up the url and pop out the last element (Which is the file name). Then it finds the anchor tag with href attribute which has the same value of the url then it puts an active class for its parent li tag
This should get you close.
$("li").click(function() {
$("li").removeClass("active");
$(this).addClass("active");
});
Related
I need to add active class to my li list and it works perfectly but I don't want to remove active class if someone click already selected li.
Here is my code.
$('.nav li').click(function() {
$(this).toggleClass('active').siblings().removeClass('active');
});
So tried this way but no any luck.
$('.nav li.active').click(function() {
$(this).addClass('active');
});
Any ideas?
You can try with this:
$('.nav li').click(function() {
$('.nav li').removeClass('active');
$(this).addClass('active');
});
By removing active class from all li items, then adding new active class for current item.
try this. Goodluck
$('.nav').on('click', 'li', function() {
$('.nav li.active').removeClass('active');
$(this).addClass('active');
});
I have menu tab like this:
<li><a id="current" href="Index.aspx">A</a></li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
And the CSS is like this:
ul#minitabs a#current {
border-color: #EEACAC;
color:#AC2B53
}
How can I change the id="current" for the selected one, and not to be constant to the first one.
This code will set id to current link based on what page is open. I think this is what you meant.
window.onload = function(){
var url = window.location.href;
url = url.split('/').pop();
document.querySelector('a[href='+url+']').id="current";
};
Improve this code. and use to change your classes or etc.
$(document).ready(function(){
$("a").click(function(){
$(this).addClass('current');
console.log($(this).attr('class'));
});
});
But I believe in CSS solution in you case.
a:hover{attr:attr}
Using jQuery you can keep up with the tab the user is clicking by doing:
$('li > a').on('click', function (e) {
if (!$(this).hasClass('current')) {
$('li > a').removeClass('current');
$(this).addClass('current');
}
e.preventDefault();
});
We are checking to if the current a tag doesn't have the class 'current'.
Here is a fiddle: http://jsfiddle.net/3ebc7kx2/
can you please tell me how to get alert of id when user click of submenu.
Actually I am adding submenu of button click with id"menu_tc_1","menu_tc_2".I want to click of submenu ? and show alert ?
http://jsfiddle.net/eHded/1553/
$(document).on('click',".menuClick",function(){
alert('jii'+this.id)
})
You need to listen to clicks on the menu elements, not the entire menu.
$(document).on('click',".menuClick a",function(e){
alert('jii'+$(this).parent().prop('id'))
})
You click on the a so find it's parent's id
http://jsfiddle.net/eHded/1565/
Try this:
$(document).on('click', ".menuClick ul li > a", function () {
alert('jii' + $(this).parent().attr('id'));
});
Assuming you want the child elements that are added to the menu when you click the add button.
Edit: to add a selected class to the parent li element:
$(document).on('click', ".menuClick ul li > a", function () {
$(this).parent().addClass('selected');
});
Try this instead
$(document).on('click',".menuClick li",function(e){
alert('jii'+this.id)
$(".menuClick li").removeClass("active");
$(this).addClass("active");
e.stopPropagation();
})
This will solve your issue.
Demo
I'm pretty new to jquery and I decided to build a jquery tabber. So far so good but I have a little problem!!! I cant see how I can activate the tabber based on the URL. For instance when the link is www.myweb.com#tab2, the second tabber becomes activated. My jquery is as follows.
$(document).ready(function() {
// When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
// On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
and HTML list as follows
<ul class="tabs">
<li>Design Team</li>
<li>Publications</li>
<li>Awards & Recognitions</li>
<li>Our Mission</li>
<li class="last-item">Company Profile</li>
</ul>
now when someone visit my website with this link www.mywebsite.com#tab3, I want tab3 to be activated. I know jquery tabber has this but I don't know how achieve this with my own jquery tabber. Any help will be greatly appreciated
Activate an item with href attribute equal to location.hash:
$(document).ready(function () {
var hash = location.hash;
$(".tab_content").hide(); //Hide all content
if ($("ul.tabs li a[href='" + hash + "']").length) { //check if such link exists
$("ul.tabs li a[href='" + hash + "']").parent().addClass("active"); //Activate tab
$(hash).show();
}
else {
$("ul.tabs li:first").addClass('active');
$(".tab_content:first").show()
}
}
Pretty simple. You can trigger click event based on your hash index.
This will work for you. If you refresh the page after clicking for say tab3 and your url contains hash index #tab3, your third tab will be focused automatically.
I assume that you have an id tab1, tab2, tab3, tab4 in your li or a tag and its viola.
Add these codes to your existing code without affecting them and you are done.
$(function(){
if(location.href.indexOf('#') != -1){
var namedAnchor = window.location.hash;
var findToTab = namedAnchor;
$(findToTab).trigger('click');
}
});
Edit:
How ever if you don't want to assign any ids to either li or a tag, you can do this.
$(function(){
if(location.href.indexOf('#') != -1){
var namedAnchor = window.location.hash;
var findToTab = namedAnchor;
$("ul.tabs li a[href='" + findToTab + "']").trigger('click');
}
});
I have some buttons( "ul.subjects li" ) and...
1. change buttons' background-images through mouseover actions
2. can be clicked one button at once.
So once clicked a button, others are cancelled.
I have two this button lists and switch contents by clicked items(subjects and ages).
I can switch background-images by changing "class" of (class="mat" to class="mat_c").
$(function(){
$(document).delegate("ul.subjects li a", "mouseover", function(){
$(this).data("imgc", $(this).attr("class"));
var regex = /_s/;
if (regex.test($(this).data("imgc")) == false ) {
$(this).attr("class", $(this).data("imgc")+"_c")
}
});
$(document).delegate("ul.subjects li a", "mouseout", function(){
$(this).attr("class", $(this).attr("class").replace(/_c/, ""));
});
});
<ul class="subjects">
<li><a id="mat" class="mat" href="/age=all/sub=mat/"></a>算数・数学</li>
<li><a id="soc" class="soc" href="/age=all/sub=soc/"></a>社会</li>
<li><a id="sci" class="sci" href="/age=all/sub=sci/"></a>理科</li>
<li><a id="eng" class="eng" href="/age=all/sub=eng/"></a>英語</li>
</ul>
While button-click action doesn't work right, trying to change attribute into class="..._s",
but immediately changed into class="..._c".
$(function(){
$(document).delegate("ul.subjects li a", "click", function(){
$("ul.subjects").html($("ul.subjects").html().replace(/_s/g, ""));
$(this).attr("class", $(this).attr("class").replace(/_c/, "_s"));
});
});
Maybe I should control the events or order of them...
and there should be more simple ways to do this. How should I figure this out?
As you can see it on http://jsfiddle.net/MsdGS/1/,
After you click the under list , mouseover action doesn't work right.
Clicked buttons' "class" should be changed to "..._s",
(class="mat" to class="mat_s")
but "..._s" immediately changed to "..._c".
Thanks,
The result (i've removed the href in the bottom ul list)
If i have understood your question correct this is what you need to change:
$(function(){
$("#course_tb").load("/age=all/sub=all/"+"#course_tb");
$(document).delegate("ul.subjects li a", "click", function(){
// iterate through `subjects`'s "a"
$("ul.subjects li a").each(function(index, el){
$(el).attr("class", $(el).attr("class").replace(/_s/g, ""));
});
//html($("ul.subjects").html().replace(/_s/g, ""));
// ...
return false;
} );
} );
Try to use hover to implement mouseover and mouseout, like
$("ul.subjects li a").hover(function() {
$(this).css("background-image", "www.google.com");
}, function() {
$(this).css("background-image", "www.google.com");
});
As you can see, just try to use css:background-image to directly change the background image. This would bypass your problem.
Hope this works for you.
.hover() API