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.
Related
I have the following jQuery code to add a class to a anchor tag when its clicked, the objective is to give the anchor tag a border bottom:
$(".breadcrumbs > li > a").click(function(){
$(this).addClass('hoveractive');
});
on Ios this class is never added and so the styles are not applied, Rest of the code is below:
.breadcrumbs > li > a.hoveractive {
border-bottom : 1px solid #f05034;
}
HTML::-
<ul class="breadcrumbs">
<li>Home</li>
<li>About Desunin<sup>®</sup> </li>
<li>Interesting links</li>
</ul>
basically i just want the class to be added for a fraction of a secound before the page refreshes and goes to the next link, but this does't seem to be happening.
If i change my code to the below,
$(".breadcrumbs > li > a").click(function(){
$(this).addClass('hoveractive');
return false;
});
I.E. include a return false statement , then the class is added in ios, but that's ofcourse not what i want to be doing , so to summerise my question why is my addClass not working in ios ?
Try to bind the click event from document and see if that helps,
$(document).on('click', '.breadcrumbs > li > a', function(){
$(this).addClass('hoveractive');
});
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'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 Nav wherein i'm attempting to use jQuery's addClass method to set the link color of the last clicked link. problem is then i have to use removeClass on all other links in the Nav. that's what i'm having trouble with.
I have written the code in a naive way, but know this is not good programming. below is the code with style sheet ref.
jQuery('#shop-nav').click(function(){
jQuery("#shop-nav").addClass("clicked");
jQuery("#art-nav").removeClass("clicked");
jQuery("#obj-nav").removeClass("clicked");
jQuery("#acc-nav").removeClass("clicked");
});
jQuery('#art-nav').click(function(){
jQuery("#art-nav").addClass("clicked");
jQuery("#shop-nav").removeClass("clicked");
jQuery("#obj-nav").removeClass("clicked");
jQuery("#acc-nav").removeClass("clicked");
});
etc. etc!
the HTML is
<div id="nav-cell-1" class="grid f-cell nav-cell">
<ul id="main-nav" class="nav clearfix">
<li>Shop
<ul id="shop-cats">
<li>Art</li>
<li>•</li>
<li>Objects</li>
<li>•</li>
<li>Accessories</li>
</ul>
</li>
</ul>
</div>
CSS:
a:link, a:visited {color:#cfb199;text-decoration:none} /* official this color:#9d9fa1; work color: #222*/
a:active, a:hover {color:#9d9fa1;text-decoration:none} /* old color:#9d9fa1; */ /* official color:#cfb199; work color: #f00*/
a:link.clicked, a:visited.clicked {color:green;text-decoration:underline}
a demo site is here:
http://www.tomcarden.net/birdycitynav/partial-nav-demo.html
I did solve part of the problem by using the this reference, but this do not include the .removeClass part.
jQuery('#shop-cats>li>a').click(function(){
jQuery(this).addClass("clicked");
});
Or this one works more like your site:
$('.nav a').click(function(){
$('.nav a').removeClass('clicked');
$(this).toggleClass('clicked');
});
test it here:
http://www.jsfiddle.net/mjYq3/18/
Try this to toggle the class:
var navs = jQuery('#shop-nav,#art-nav, #obj-nav, #acc-nav');
navs.click(function(){
navs.removeClass("clicked");
$(this).addClass("clicked");
});
Untested
jQuery('#shop-cats>li>a').click(function(){
$this = jQuery(this);
$this.parent().children('a').removeClass('clicked');
$this.addClass("clicked");
});
You can first remove all the clicked classes then add it back to just the one that was clicked.
jQuery('#shop-cats>li>a').click(function(){
jQuery('#shop-cats>li>a').removeClass("clicked")
jQuery(this).addClass("clicked");
});
This should work:
$('#main-nav a').click(function() {
$('#main-nav a').not(this).removeClass('clicked');
$(this).addClass('clicked');
});
On the basis that you apparently want to do this for all links that are descendents of #main-nav, and not just those that are in the inner <ul> list.