I have four li tags inside a ul tag.
i want to get text inside li tag when i select one li and i want to hide the other three li values.
Only the selected one should still be shown on the page.
<ul id="names">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
$('#names li').click(function(){
$(this).siblings().hide();
});
This answers both parts of your question:
$('#names li').click(function(){
var x = $(this).text(); // gets the text of the selected li
alert(x); // displays the text inside the selected li
$(this).siblings().hide(); // hides all other li's
});
Here is a working jsFiddle for your example.
How about this? It will hide them all and display the one which was clicked using a jQuery selector.
$('#names li').click(function() {
$('#names li').hide();
$(this).show();
})
Example of use: http://jsfiddle.net/eqUD3/
Try like this
$("#names li").click(function(){
var selected = $(this);
alert('You have selected '+ $(this).text());
$("#names li").hide();
$(this).show();
});
check the fiddle DEMO
Related
I have a menu on a page. I want to add the class username to the my username span, that has an a href; that equals ?m=user_admin&p=edit_user&user_id=1.
Keep in mind that I want it to add this class, no matter what the username is! because the username will change all the time. How can I do it?
Example of the Menu
<div class="menu">
<ul>
<li><a class="user_menu_link_selected" href="#"><span>Dashboard</span></a></li>
<li><a class="user_menu_link" href="#"><span>Monitor</span></a><li>
<li><a class="user_menu_link" href="#"><span>Admin</span></a></li>
<li><a class="user_menu_link" href="#"><span>FTP</span></a></li>
<li><a class="user_menu_link" href="?m=user_admin&p=edit_user&user_id=1"><span>my username</span></a></li>
</ul>
</div>
I tried this JS code but it added the class to all the spans. I only want it added on the my username span because the href equals ?m=user_admin&p=edit_user&user_id=1.
$('ul a').each(
function(){
if($(this).attr('href')=="?m=user_admin&p=edit_user&user_id=1"){
$('.menu > ul > li > a > span').addClass("username");
}
});
$('ul a').each(
function(){
if($(this).attr('href')=="?m=user_admin&p=edit_user&user_id=1"){
$(this).find('span').addClass("username");
}
});
The following line should refer to this:
$('.menu > ul > li > a > span').addClass("username");
Probably
$(this).addClass("username");
use CSS here is the documentation it will select all the span whose parent a has the link
a[href='?m=user_admin&p=edit_user&user_id=1'] span {
color:Red
}
demo - http://jsfiddle.net/zq0fs7om/
Try this..
$('ul li a').each(
function(index){
if($(this).attr('href')=="?m=user_admin&p=edit_user&user_id=1"){
$(this).children('span').addClass("username");
}
});
You can check out the jsfiddle here:
http://jsfiddle.net/ow1478rd/
here's the gist of the code:
$('ul > li > a').each(function(){
if($(this).attr('href')=="?m=user_admin&p=edit_user&user_id=1"){
$(this).closest("li").find("span").addClass("username");
}
});
Basically the thing to note here is "closest" will basically search UP the DOM, and then "find" will search DOWN the DOM. so with your structure you're going up to the closest list element, and then finding the span inside of it to change the CSS. Hope this helps man.
I'm trying to change the classes of certain HTML elements when clicked on using JavaScript, but having some trouble.
Here's the JavaScript:
$(document).ready(function() {
$('#subnav li a').click(function(){
var $this = $(this);
$this.addClass('highlight').siblings('a').removeClass('highlight');
});
});
Here's the corresponding HTML:
<div id="subnav">
<ul id="subnav-ul">
<li>Click 1</li>
<li>Click 2</li>
<li>Click 3</li>
</ul>
</div>
The single CSS class is as follows:
.highlight {
border-left: 4px solid rgba(51,102,255,.6);
color: rgba(0,0,0,.8);
}
The anchors are not siblings, they are within LI elements that are siblings
$('#subnav li a').click(function(){
$(this).addClass('highlight')
.closest('li')
.siblings('li')
.find('a')
.removeClass('highlight');
});
$('#subnav li a').click(function(){
$(this).addClass('highlight');
$(this).parent().siblings('li').find('a').removeClass('highlight');
});
Try the above code.
The anchors are not siblings to one another. They are cousins.
It's not removing the highlight class because you have:
$this.addClass('highlight').siblings('a')
when it should be:
$this.parent().siblings('li').find('a')
Example
http://jsfiddle.net/DU7V8/1/
Try this code:
$(function() {
$('#subnav li a').click(function(){
$('#subnav li a.highlight').removeClass('highlight'); //remove class in all links
$(this).addClass('highlight'); //add class in current link
});
});
$(function(){}); is the shortcut to $(document).ready(function() {});
I hope this help.
lets dont forget about find('a') output is array
Try this:
$(document).ready(function() {
$('#subnav li a').click(function(){
$(this).addClass('highlight');
$(this).parent().siblings('li').find('a').each(function(){
$(this).removeClass('highlight');
});
});
});
See on jsFiddle
The jQuery function would append the text between the li's to a div("#title").
something like
$(function () {
$("#videos li a").click(function() {
$(this).attr('id', 'active');
$('#title').text($(this).text());
});
});
but it appends the id "active" to the li clicked on, and is removed when clicked on another.
You can use the following code to get the value and put it in inside the div
$("#examplediv").html( $("#menu>li>a").html());
click here for jsfiddle demo
Add this to your document.ready handler:
$('#menu a').click(function(){
$('#examplediv').text($(this).text());
});
Try like this
$(document).ready(function(){
$('ul#menu li').text('My Text');
})
and your html should be like this
<ul id="menu">
<li>real</li>
</ul>
bec it is broken in your question
Use this:
HTML:
<ul id="menu">
<li id="menu-li">real</li>
</ul>
<div id="examplediv"></div>
JQuery:
$(document).ready(function(){
$("#examplediv").text($("#menu-li").text());
})
To get text in li:
$('ul#menu li a').text()
I have a navigation list:
<ul>
<li>Home</li>
<li>Contact Me</li>
</ul>
When Home or Contact is clicked, the respective div is hidden or shown.
<script>
$("#tabs a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
});
</script>
<div id="home" class="toggle" style="display:none"> This is the Home page.</div>
Question
How do I make the background of the word in the navigation list different when its corresponding div is shown?
E.g. When the div "home" is shown, the word "Home" in the navigation has a blue background.
An example:
$('ul a').click(function() {
$(this).closest('ul').find('a').css('background-color', '');
$(this).css('background-color', 'red')
return false;
});
A DEMO
<script>
$("#tabs a").click(function(e){
e.preventDefault();
$(#tabs a).removeClass('yourClass');
$(this).addClass('active');
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
});
</script>
css
.active
{
background-color:blue;
}
hope this helps!!
You'll need to add the background color to the clicked element, but you'll also want to make sure to remove it from whichever element was clicked last.
$("#tabs a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
// Remove the class from any siblings if it exists
$("#tabs a").removeClass('yourClass');
// Add the class to the clicked #tab a
$(this).addClass('yourClass');
$(toShow).show();
});
And then create a class in your CSS file (e.g., 'yourClass') that attributes a background color and/or anything else you want to edit it.
.yourClass {
background: #e2e2e2;
}
Actually I am trying to do jquery tabs. I have written a code that needs rework and probably better ways to implement. I think I could use function arguments to achieve this, but I am not sure. Can somebody tell me how to achieve this in a better way. Though my code works but I think it is rudimentary. I would also like only one tab to display a background color if this is active.
http://jsfiddle.net/5nB4P/
HTML:
<div id="nav">
<ul>
<li>First Tab</li>
<li>Second Tab</li>
<li>Third Tab</li>
</ul>
</div>
<div id="content">
<div class="tabs first">First Div content</div>
<div class="tabs">Second Div content</div>
<div class="tabs">Third Div content</div>
</div>
Script:
$(function() {
$("li :eq(0)").click(function() {
$("li").css("background","none");
$(this).css("background","red");
$(".tabs:gt(0)").hide();
$(".tabs:eq(0)").show();
})
$("li :eq(1)").click(function() {
$("li").css("background","none");
$(this).css("background","red");
$(this).css("background","red")
$(".tabs:gt(1), .tabs:lt(1)").hide();
$(".tabs:eq(1)").show();
})
$("li :eq(2)").click(function() {
$("li").css("background","none");
$(this).css("background","red");
$(".tabs:lt(2)").hide();
$(".tabs:eq(2)").show();
})
})
There is a much better way to achieve this. Here you go
$(function() {
$("li").click(function() {
$(this).css("background","red").siblings().css("background","none");
$(".tabs").hide().eq($(this).index()).show();
return false;
});
})
Working Demo
As #Niels mentioned for setting the background style you can have a dedicated class(active) and add/remove this class instead of setting the inline sytle.
FYI..In the above code $(this).index() gives the position of the first element within the jQuery object relative to its sibling elements
CSS:
.active {
background-color:red;
}
JQuery:
$('li').click(function(){
$this = $(this);
$this.addClass('active').siblings().removeClass('active');
$('.tabs:eq(' + $this.index() + ')').show().siblings().hide();
});
Here is a demo: http://jsfiddle.net/5nB4P/6/
Here is the way that I updated this to make it smaller and I believe to be more effective and easier to use:
http://jsfiddle.net/5nB4P/7/
Code:
$("#nav ul li").click(function(){
var id = $(this).attr("rel");
$("#nav ul li").each(function(){
$(this).removeClass("active");
});
$(this).addClass("active");
$("#content div").each(function(){
$(this).hide();
});
$("#"+id).show();
});
Do you mean this? http://jsfiddle.net/tsukasa1989/5nB4P/1/
$(function() {
$("#nav li").click(function(){
// Handle active status
$(this).addClass("active").siblings().removeClass("active");
// Show the tab at the index of the LI
$(".tabs").hide().eq($(this).index()).show();
})
// Don't forget to set first tab as active one at start
.eq(0).addClass("active");
})
If you want to style the active tab use
#nav li.active{}
My approach doesn't use arguments, but HTML class and id references to shorten things: http://jsfiddle.net/ZScGF/1/