I am using a .click function to switch out text based on menu clicks. (example:http://jsfiddle.net/3r9hcz3z/) It works great except that I am still pretty new to Jquery & I can't figure out how to add a link inside of on one of the .html() menu items.
Any help would be awesome. I know that there is a way to do it within the Jquery but just can't find the right coding. Thanks!
$('#menuone').click(function(){
$('#title').text("ONE");
$('#text').html("This is text & where I would like to be able to add a link");
});
$('#text').html("<a href='someUrl'>Link</a>");
This should do it.
one clean way to do this is to add a class to your anchor, and then set its href attribute through .attr:
$('.a_class').attr('href','http://example.com');
Related
https://www.verizonwireless.com/homepage/ please make sure to have / at end of homepage/ so ".com/homepage/"
I try to move the mouse over [Phones, Plans etc.] Menu and click on sub-menu items. I tried all my best it is not working. Please help.
$('.links-menu').find('a:visible:contains("Phones")').mouseover()
or click does not work.
Thanks a ton.
Wrong Class Name try this one:
With Contains Phones
$('.o-tier-two a:contains("Phones")').mouseover();
By nth-child
$('.o-tier-two li:first').mouseover();
If you need click, just find the selector and click. Mouseover doesn't need in this case.
$('.o-tier-three a:contains("Smartphones")').closest('td').click();
If you are trying this for automation then better to use XPath instead of Executing JQuery
//div[contains(#class, 'o-tier-two')]//span[contains(text(), 'Phone')]//parent::a
Something Like This.
Problem is actually pretty simple , but i don't know why can't i get it to work.
i want to add a classname to my button on Click by using its current class btn-cat.I am just a student learning not professional so please keep that in mind before make any acquisitions.
Here is the Link . where am i wrong?
Note: I can't find any good or valid way to post jsfiddle link that's why i shorten the link to workaround Here is SO question for that.
Change $('this') to $(this), otherwise you are passing to jQuery a string instead of DOM element in question. Demo - Fiddle
i have two back button generated but i need only one. i want to remove the button with rel='2'. below are the buttons
BACK
BACK
i am trying to remove it through jquery like
$('.prev-tab a[rel=2]').remove();
but i am not getting the result can any one correct my line of code. thanxs in advance for any kind of help
This should do it.
$('a.prev-tab[rel=2]').remove();
Based on your code:
$('.prev-tab a[rel=2]').remove(); // You are looking for an anchor tag with rel=2 who is a descendant of an element with class `prev-tab`
if you know that rel is going to be specific in your page on anchors .prev-tab then you can just use $('.prev-tab[rel=2]'). .prev-tab[rel=2] or just a[rel=2] is better than a.prev-tab[rel=2]
Try using below code.
$(".prev-tab").each(function(){
if($(this).attr(rel)==2)
{
$(this).remove();
}
});
This will also work (if no other anchor tag is not having 'rel' attribute you want to remove)..
$('a[rel=2]').remove();
I'm a bit new to jQuery and I have difficulties in achieving a function so I really hope somebody could guide me a bit. What I basically want to do is to highlight 2 elements simultaneously (via toggleClass).
Basically I have a repeating div (#post) which contains a title, thumb and description div. What I would like to do is once I hover on the title or the thumb div the elements to get a new additional class (xxxHover). So basically once the user hovers the mouse on the title/thumb div the title/thumb div (both of them) get a new class called (xxxHover where xxx stands for the div name - in this case titleHover/thumbHover).
I might not be the best in explaining so I've prepared a jsFiddle as well:
http://jsfiddle.net/yLqnd/12/
As you can see my problem is to restrict the scripts for the current element only (#post in our case). If it helps or matter I have to say that this will be integrated into a WordPress website (so the HTML structure is basically in the loop.php), that's why I would like to restrict the 2x highlight effect only per item (#post).
Thanks a mill in advance for any idea!
http://jsfiddle.net/oscarj24/yLqnd/13/
Here's an updated jsFiddle:
Instead of being so specific, any div's inside will now toggle the class
jsFiddle Link
Basically I pushed it all together:
$(".post div").mouseover(function(){
$(this).closest('.post').find('div').toggleClass('thumbHover');
}).mouseout(function(){
$(this).closest('.post').find('div').toggleClass('thumbHover');
});
I think you can get the effect you're looking for by using .siblings() in jQuery.
$(".title").mouseover(function(){
$(this).toggleClass("titleHover");
$(this).siblings(".thumb").toggleClass("thumbHover");
});
This will limit the toggleClass to only the .thumb that resides in the same .post.
http://api.jquery.com/siblings/
simples, just do it on the parent of both elements:
$(".post").mouseover(function(){
$(this).find('div').toggleClass('thumbHover');
}).mouseout(function(){
$(this).find('div').toggleClass('thumbHover');
});
I'm trying to make a jQuery toggle menu for a mobile website for one of my clients. I'll have to tell you i'm not experienced in javascript and i justed started looking at it.
The current website is a Wordpress website so the menu structure is generated by WP.
Because this is generated by WP i need to use javascript to manipulate the data for adding the + - and > signs for toggleing and if no childeren to go directly to the page.
I use this javascript for adding the spans with the desired icon. I've managed so far.
http://jsfiddle.net/9Dvrr/9/
But there are still 2 problems i can't seem to figure out.
Remove the href from the "a" when the "li" has a "ul" child.
This should remove the links of the items so they will only toggle (not link) to navigate straight throug to the deepest level.
Currently the javascript is adding mutiple spans with the icons. I can't seem to figure out why
I'm stuggeling with this for a while now and was wondering if someone could help me with this.
In the jsfiddle you provided, you loop on the elements to add spans with a "+" or "-" sign inside, depending on the case. The thing is, the HTML you're starting with already has those spans in it, wich is why you're seeing some duplicates.
As you said you can't add those spans in the HTML because of your WP strucutre, I guess they come from a bad copy/paste you did while creating the jsfiddle. I removed them in the HTML and added a return false to prevent linking to another page when there is a ul inside the a tag.
http://jsfiddle.net/wzzGG/
Your first problem can be solved with the following:
$.each($('#menu-mobiel li'), function(i, value) {
var $this = $(this);
if ($this.has('ul').length > 0) {
$this.children('a').attr('href','javascript:');
}
Your second problem is a bit harder for me to understand. Do you only want one + for items with submenus, and one > for items with a link?