Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have some content which I have displayed by id when click. I need a javascript function for active links (class name is .active), and it will remove(.active) when other links have been active,
An example of the code structure is:
<ul class="product">
<li>Myanmar</li>
<li>Madagascar</li>
<li>United States of America</li>
<li>Ethiopia</li>
<li>Brazil</li>
<li>Australia</li>
<li>China</li>
<li>Kenya</li>
<li>Canada</li>
</ul>
but to add to Davids answer this is what you are going to want to do:
first check if the link you are clicking has the class of active before you do anything so you can avoid flicker (I am assuming you are going to jump to divs either animated or not)
$('ul.product a').click(function(){
if(!$(this).hasClass("active")){
$(".active").removeClass("active");
$(this).addClass("active");
}else{
return false;//this prevents flicker
}
});
Try something like this:
$('ul.product a').click(function(){
$('ul.product a').removeClass("active");
$(this).addClass("active");
});
Fiddle: http://jsfiddle.net/s8nky/
check : http://jsfiddle.net/en2LT/
try this...when clicking the link you should addclass active and removeclass active
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm wanting to add two divs after my UL via jQuery. How can I do this?
My UL is:
<ul class="linkList navigationLinks enabled" id="globalNav">
<li class="navigationGroup" id="globalNavItem1">
<a href="#><span>New</span></a>
</li>
</ul>
The divs I would like to add after the UL are:
<div id="left-primenav-bg"></div>
<div id="right-primenav-bg"></div>
Thank you.
If the elements already exist and only need to be moved:
jQuery('#left-primenav-bg, #right-primenav-bg').insertAfter('#globalNav');
jsfiddle
If not, use jQuery to create them on the spot:
jQuery('<div id="left-primenav-bg"></div><div id="right-primenav-bg"></div>')
.insertAfter('#globalNav');
jsfiddle
In both jsfiddles I've added content to the divs for clarity reasons. In the first I've added the existing elements into a hidden div to show they actually get moved out of that div.
Also, check the jQuery documentation on the insertAfter method: http://api.jquery.com/insertAfter/
Easiest way would be
$("#globalNav").after('<div id="left-primenav-bg"></div><div id="right-primenav-bg"></div>')
Documentation : http://api.jquery.com/after/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
friends
I'm writing an app. I'm creating some list items using JavaScript. Each of those items has an id, that is the code of that element in my database.
I need to take that id value to make some searches in my database. So, how can i do that?
Using jQuery:
$('.my-ul-class-name li').click(function() {
alert($(this).attr('id'));
});
<ul class="my-ul-class-name">
<li id="myId1"></li>
</ul>
This code is saying "Whenever you click on any LI item in the list with classname "my-ul-class-name", ALERT me the ID of the LI item.
here's the way to select the id :
document.getElementById("idname");
You can add another attribute after it.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
how can I add span that have arrow picture for the ul.menu li that have child elements (ul.sub-menu li ).
HTML
<ul class="menu">
<li>hhh</li>
<li>hhh
<ul class="submenu">
<li>kkk</li>
<li>kkk</li>
<li>kkk</li>
</ul>
</li>
<li>hhh</li>
</ul>
how can do that by jquery or css
This jQuery code should work:
$(".submenu").parent().append("<span class='arrow'></span>");
There is no proper way exist to give you perfect answer, because you don't provide complete code (JS, HTML).
But as your requirement: if you want to add a span to parent menu -
First you need to select parent element, for this you can use .parent() jquery selector.
Jquery selector .parent() : - Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
Here complete documentation of jquery .Parent()
And second:
use .append() - for adding element to the end of selected element
$(".submenu").parent().append("<span class='arrow'></span>");
use .prepend() - for adding element to the beginning of selected element
$(".submenu").parent().prepend("<span class='arrow'></span>");
Try this,
$("ul.submenu").closest('li').children('a').append("<span> ▼</span>");
Demo
Use this if you want add class to ul tag along with menu
$(".submenu").parent().parent().append("<span class='arrow'></span>");
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions must demonstrate a minimal understanding of the problem being solved. Tell us what you've tried to do, why it didn't work, and how it should work. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I need to attach a listener to an element created via js dom manipulation. I thought that this is what jquery ON was for, but the below example is not working.
It works with the initial element, but not with any that are added via JS. The added elements have the correct class name.
<div id = "tag_options">
<div class = 'tag_option'>test</div>
</div>
function greet(event) { alert("Hello "); }
$("[class='tag_option']").on("click", {}, greet);
Try this:
function greet(event) { alert("Hello "); }
$("#tag_options").on("click", ".tag_option", greet);
Use delegation, e.g:
$(document.body).on("click","[class='tag_option']", greet);
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I want to add an active class to the <li> that an ID is in, for example:
<li>text</li>
How can I add a class to the <li> that #foo is in?
$('#foo').parent('li').addClass("yourclass")
$("#foo").closest("li").addClass("bar");
If your <a> tag might be wrapped in other elements, and not a direct child of <li>, parent('li') will not work:
http://jsfiddle.net/PMfVK/
HTML
<ul>
<li><div><a id="foo">Foo</a></div></li>
<li><div><a id="bar">Bar</a></div></li>
</ul>
JS
$("#foo").closest("li").addClass("foo"); // this will correctly grab the li
$("#bar").parent("li").addClass("bar"); // this will grab nothing
$('#foo').parent('li').addClass('active');
$("li").has("#foo").addClass("yourclass")
$('a[id]').closest('li').addClass('active');
demo
First select the element with the ID foo using the ID selector. Then, use .parents to select the <li> parent of that element. Use .eq(0) to ensure that only the nearest parent is found. Finally, use addClass to add the class to the <li> element.
Since we are using parent s even if the element with the foo ID is nested several elements below the <li> it will still be selected.
$("#foo").parents("li").eq(0).addClass("bar");
See my example on jsFiddle.