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()
Related
I have the following code in html. I just want to remove active class when we click on other li and add active class to li on which it is clicked.
<ul class="pagination" id="paginationUL">
<li class="active">1</li>
<li onclick="javascript:selectThis()">2</li>
I tried to remove the class first and it is not working. Please suggest.
function selectThis() {
$('ul[class="pagination"] li[class="active"]').removeClass("active"));
}
Edited the script and it is working.
Your selectors are incorrect. You need to use the ID (#) or class (.) selector:
$('#paginationUL li.active').removeClass("active");
However, you're better off not using intrusive event handlers, and rather doing something along the lines of the following:
$('#paginationUL > li').on('click', function() {
$(this).addClass('active').siblings('.active').removeClass('active');
});
The latter example will apply a class of active to the clicked element and remove it from any other elements in the <ul>.
You can use something like this
$("#paginationUL li").click(function() {
$(this).toggleClass("active");
$(this).siblings().removeClass("active");
});
If you're using jquery this should do it:
$('#paginationUL li').click(function(){
$('#paginationUL li').removeClass("active");
$(this).addClass('active');
});
Your selector is incorrect. Use #paginationUL[class="pagination"] li[class="active"] or ul.pagination li.active or #paginationUL li.active
You can write a line to bind to all li elements in that menu. The $(this) selector acts against the element clicked on, while using .siblings() acts on all other child li elements.
$('#paginationUL > li').click(function(){
$(this).addClass('active').siblings().removeClass('active')
})
.active { background: orange; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="pagination" id="paginationUL">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
I have two which are created dynamically,
<div id="flipbutton1" class="flipButton">
<ul>
<li>OFF</li>
<li class="on">ON</li>
</ul>
</div>
also this
<div id="flipbutton2" class="flipButton">
<ul>
<li>OFF</li>
<li class="on">ON</li>
</ul>
</div>
Now i want to use this same JavaScript function but on different id.
Example is:
<script>
$(document).ready(function(){
$("#flipbutton1 ul li").click(function(){
$("#flipbutton1 ul li").removeClass("on");
$(this).addClass("on");
});
});
Problem:
It should work in such a way that when I click flipbutton1 it should work the same way but when i click flipbutton2 it should chanhge #flipbutton1 to #flipbutton2.
Any help would be appreciated.
Regards,
Do you want only one of the <li>s on?
$(".flipButton ul li").click(function () {
$(this).siblings().andSelf().toggleClass("on");
});
This will work
$(document).ready(function(){
$(".flipButton ul li").click(function(){
$(this).toggleClass("on")
});
});
Edited version:
$(document).ready(function(){
$(".flipbutton ul li").click(function(){
$(".flipbutton ul li.on").removeClass("on").addClass("off");
$(this).removeClass("off").addClass("on");
});
});
This ought to work even if you add more flipbuttons, as long as they use the .flipbutton class.
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
I have this simply piece of JQuery that toggle a class on anchor tags/links.
What I don't know is how do I make the class toggle or add/remove when the other links are clicked? Example: The class can only apply to the link that is click and cannot be on more than one at a time. That's where I am stuck. Well, I don't know how to do it.
Secondly how do I use the JQuery Cookie to keep the currently link active. I have downloaded the cookie extension.
Here is what I have done:
HTML:
<ul class="navbar">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
CSS:
.activeLink{
color: #930;
}
JQuery:
$(document).ready(function() {
$('.navbar li a').click(function(){
$(this).toggleClass('activeLink');
});
});
Thank you!!
Below is a solution that uses event propagation:
$(function() {
var $activeLink,
activeLinkHref = $.cookie('activeLinkHref'),
activeClass = 'activeLink';
$('.navbar').on('click', 'a', function() {
$activeLink && $activeLink.removeClass(activeClass);
$activeLink = $(this).addClass(activeClass);
$.cookie('activeLinkHref', $activeLink.attr('href'));
});
// If a cookie is found, activate the related link.
if (activeLinkHref)
$('.navbar a[href="' + activeLinkHref + '"]').click();
});
Here's a demo (without the cookie functionality as JSFiddle lacks support).
Here is how I do it. It's a little simplistic, but it gets the job done without a lot of brain strain.
<ul class="navbar">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
<script>
$(document).ready(function() {
$('.navbar li a').click(function(){
$('.navbar li a').css('color', 'black');
$(this).css('color', '#930');
});
});
</script>
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/