This is the HTML i have and i want to change the href attribute from http://google.com to something else, please note that this link should not be changed http://google.com/home/inner_links. I cannot edit the html so looking for a solution using jQuery or Javascript. Thanks.
<div class="branding">
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://">
<div class="main-menu">
<ul><li</li></ul>
</div>
</div>
Problems with the code fragment
First off, it is not a full document but a code fragment, as such it doesn't include appropiate headers. We can disregard this understanding that the provided code belongs to a larger document.
The following problems are present in such code fragment:
The img tags require a non-empty src attribute and a alt attribute.
The a tags require a valid url value in their href attribute.
There doens't seem to be a closing tag for <a href="http://">
And finally thig thing that doesn't make sense <li<a href="http://google.com/home/inner_links">
Now, this is beyond the question, but given that you have the following fragment:
<div class="main-menu">
<ul><li</li></ul>
</div>
We can see that you have closing li and ul tags. So I would expect that you were trying to do as follows:
<div class="main-menu">
<ul><li></li></ul>
</div>
Solution
The code I'm suggesting to use to edit the href values is the following:
$('.branding').find('img').parent().attr('href', 'newhref');
That is selecting the parents of all the img that are inside elements with class "branding", and setting the href attribute of them.
Demo with original code fragment
$('.branding').find('img').parent().attr('href', 'newhref');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="branding">
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://">
<div class="main-menu">
<ul><li</li></ul>
</div>
</div>
Demo with the code fragment and suggested fixes
$('.branding').find('img').parent().attr('href', 'newhref');
<!DOCTYPE html><head><title>demo</title><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></head>
<div class="branding">
<a href="http://google.com">
<img src="http://lorempixel.com/100/100/" alt="" class="preload-me"/>
</a>
<a href="http://google.com">
<img src="http://lorempixel.com/100/100/" alt="" class="preload-me"/>
</a>
link
<div class="main-menu">
<ul><li>link</li></ul>
</div>
</div>
Notes: In addition to the fixes, I have create a complete document from the fragment, set the title to "demo", used lorempixel for the images, set the invalid url to http://example.com and added the text "link" to the anchors to ease the demo.
jquery:
$('.branding a').attr('href', YOUR VALUE)
or
$('a[href="http://google.com"]').attr('href', YOUR VALUE)
The html at Question is invalid.
<div class="branding"> <!-- 1) where is closing tag for this `DIV` element? -->
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://google.com">
<img class=" preload-me"/>
</a>
<a href="http://">
<div class="main-menu"><!-- 2) where is closing tag for this `DIV` element? -->
<!-- `UL` is not permitted child of `A` element -->
<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a -->
<ul><li</li></ul>
</div><!-- is this closing `DIV` tag for 1) or 2) ? -->
That should be changed before changing the href at the invalid html. If you cannot change html yourself, you should ask whomever supplied the html why it is delivered invalid; and ask that it be changed to valid html before proceeding.
Then adjust href of <a> elements.
jquery:
$(document).ready(function() {
$("img").parent().attr("href", some url);
});
Here a sample code- I had a similar requirement in my project.. you can change based on your need.
Note: alert() - is for demo purpose only.
$(document).ready(function(e) {
var currentUrl= $("a").attr('href');
newEditUrl = currentUrl.replace("http://google.com", "http://google.com/home/inner_links");
alert(newEditUrl);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="branding">
<a href="http://google.com">
<img class=" preload-me" />
</a>
<a href="http://google.com">
<img class=" preload-me" />
</a>
<a href="http://">
<div class="main-menu">
<ul>
<li<a href="http://google.com/home/inner_links">
</a>
</li>
</ul>
</div>
Hope this helps.
Try something like this,
function changeHref(){
document.getElementsByTagName("a").href="Someplace.com";
}
Also, which link do you want to change specifically? Or do you want to change all of them?
Related
I had script setup to toggle show/hide divs on a page with menu items.
However I wanted to load external HTML into one of them and was running into issues.
Now I am wanting to just having the menu items load external HTML into a single div.
I can't seem to make it work though and I want to have a menu like this:
<div id="topmenu">
<a href="#" >Home</a>
<a href="#" >Videos</a>
<a href="#" >Follow</a>
<a href="#" >Contact</a>
</div>
Each item loads a different HTML into a div like this using jQuery:
<article>
<div id="bodycontent">
...
</div>
</article>
If you want to add or means to say load external html then you need to add some java scrip.Let take your example.
<div id="topmenu">
<a href="#" id='homeTab'>Home</a>
<a href="#" id='videoTab'>Videos</a>
<a href="#" id='followTab'>Follow</a>
<a href="#" id='contactTab'>Contact</a>
</div>
See I've added individual id to each now you need to call a load function of js
$("#homeTab").on('click',function(){
//firstly clear html part
$('#bodycontent').html('');
$('#bodycontent').load('hometab.html');//put your exact loaction of html file in my case I'm assume both are in same folder.
});
That's it all done you can do like this.
Hope it will work for you.
So I have a simple HTML website. I have the following links:
<div id="buttons">
<ul>
<li class="first">
<li>Resources</li>
<li>Make Enquiry</li>
<li> <a href="https://www.facebook.com/pages/"><img border="0" alt="Facebook Link" src="facebook.png">
</ul>
</div>
All of the links work fine. But I have an image under the links:
<div class="tel"><img src="images/tel.png"></div>
The image is shown correctly, but it acts as a link (to the facebook link that is shown as the last link in the list of links). Do you know why this is happening? as this image is not meant to act as a link.
For example if I make the facebook link the second link (or any link that doesn't make it the last link in the list) then the image doesn't act as a link. But I need the facebook link as the last one.
<div id="buttons">
<ul>
<li class="first">
<li> <a href="https://www.facebook.com/pages/"><img border="0" alt="Facebook Link" src="facebook.png">
<li>Resources</li>
<li>Make Enquiry</li>
</ul>
</div>
You missed some closing tags.
<div id="buttons">
<ul>
<li class="first"></li>
<li>
<a href="https://www.facebook.com/pages/">
<img border="0" alt="Facebook Link" src="facebook.png">
</a>
</li>
<li>Resources</li>
<li>Make Enquiry</li>
</ul>
</div>
You need to close the last <a> with an </a> before the <img> otherwise the img is part of the link.
Also the first <li> is never closed either.
this.faqLogic = function()
{
$('a .toggle').click(function(){
$('this .answer').show();
});
};
HTML:
<li class="clearfix question">
<a class="toggle" href="#">>
<h3>
QUESTION
</h3>
</a>
<div id="answer_1" class="answer">
<h6>
<span>ANSWER</span>
</h6>
</div>
</li>
There are multiple questions/answers of course. I just cant understand as to why it won't work at all. I'm getting no errors and required dependencies (jquery) are installed and called in first.
Any ideas?
Because you're trying to select elements of class .answer that are children of a <this> element. Clearly you have no <this> element.
Also, because you have a space between a .toggle, you're selecting elements of class .toggle that are children of an a element. You want a element that have class .toggle. No space for that selector, so it would be a.toggle.
All in all, perhaps you meant:
$('a.toggle').click(function(){
$('.answer').show();
});
I suggest that you take a read of how CSS selectors work in general. Your understanding could do with a bit of firming-up.
$('.toggle').click(function(){
$(this).next().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<li class="clearfix question">
<a class="toggle" href="#">
<h3>
QUESTION
</h3>
</a>
<div id="answer_1" class="answer">
<h6>
<span>ANSWER</span>
</h6>
</div>
</li>
I'm trying to figure out if it's possible (and if so how) to change a link's color by polling the title attribute. I'm working with an HTML page that is generated from another script that creates a accordion list of hyperlinks. A couple of those hyperlinks I'd like to highlight, and I believe I can shoehorn in some JavaScript to do this (and the title attribute is the only unique element I can rely on), but I'm not sure how to write it. Here's what a bit of the list page looks like:
<div class="AccordionPanel AccordionPanelOpen">
<div class="AccordionPanelTab">
Forms
</div>
<div class="AccordionPanelContent" style="height: auto; display: block;">
<ul class="arrows searchSubtype">
<li class="">
<a title="Form-1.doc" target="_top" href="../Form-1.doc">
Form 1
</a>
</li>
<li class="">
<a title="Form-2.doc" target="_top" href="../Form-2.doc">
Form 2
</a>
</li>
<li class="">
<a title="Form-3.doc" target="_top" href="../Form-3.doc">
Form 3
</a>
</li>
<li class="">
<a title="Form-4.docx" target="_top" href="../Form-4.docx">
Form 4
</a>
</li>
</ul>
</div>
</div>
Sure, use the attribute selector:
$("a[title='Form-4.docx']").css("color","red");
onclick function on ipad and iphone is working fine with following code
<li id="321">
<a class="" onclick="checkTagGroup('val');" href="javascript:void(0);" id="321">
Grp
</a>
</li>
but it is not working when i include div inside li as below
<li id="321">
<a class="" onclick="checkTagGroup("321");" href="javascript:void(0);" id="321">
Grp
</a>
<div class="close-tag1">
<a href="/tagsGroup/delete/TXpJeA==" id="link_id"><img src="/themes/alltimehigh/images/portlet-remove-icon.png">
</a>
</div>
</li>
did you tried with onclick="checkTagGroup('321')"
if you still have the problem please provide a jsfiddle link with more details
It's probably due to the " inside the function call. Try to use the apostrophe-quote like in the first approach or use ' instead like this:
<a class="" onclick="checkTagGroup('321');" ...>