Menu
I have below html:
<div class="threeimages" id="txtCss">
<a>
<img alt="Australia" src="/Images/Services%20button_tcm7-9688.gif"/>
</a>
<div class="text" id="txtLink">
<h2>
<a href="/partnerzone/downloadarea/school-information/australia/index.aspx">Australia</a>
</h2>
<p>Land of the sunshine!</p>
</div>
</div>
Now if you see there is href in div ID "txtLink" i.e. Australia
I want this at the runtime of page the same href values get copied into above tag of div ID "txtCss", I mean when my page gets displayed my html will be as below:
<div class="threeimages" id="txtCss">
<a href="/partnerzone/downloadarea/school-information/australia/index.aspx">
<img alt="Australia" src="/Images/Services%20button_tcm7-9688.gif"/>
</a>
<div class="text" id="txtLink">
<h2>
<a href="/partnerzone/downloadarea/school-information/australia/index.aspx">Australia</a>
</h2>
<p>Land of the sunshine!</p>
</div>
</div>
please suggest some code for above problem
784
Definition and Usage The href attribute specifies the URL of the page the link goes to. If the href attribute is not present, the <a> tag will not be a hyperlink. Tip: You can use href="#top" or href="#" to link to the top of the current page!
What method can be used to retrieve the href attribute of an element? Answer: Use the jQuery . attr() Method attr() method to dynamically set or change the value of href attribute of a link or anchor tag. This method can also be used to get the value of any attribute.
The attribute value of href (inside the quotation marks) is a URL that tells the browser where to go when the link is selected. Note the additional attributes target=“_blank” and rel=“noopener” — these tell the browser to open the web page in a new tab.
this is the shortest answer without using any library and works only thing what you want
var tc = document.getElementById("txtCss");
var ary = tc ? tc.getElementsByTagName("a") : [];
if(ary.length >= 2)
ary[0].href = ary[1].href;
Update
An answer without jquery here: https://stackoverflow.com/a/887348/11333
Back in 2009 it was perfectly acceptable to use jquery though :)
Create a js file with something like this:
$(document).ready(function() {
$('.threeimages').each(function(){
$(this).DupeHref();
});
});
jQuery.fn.DupeHref = function(){
var target = $(this).find(".text h2 a").attr("href");
$(this).find("a").attr("href", target);
}
Reference both the jquery and this javascript file in your html. Something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<body>
<div class="threeimages">
<a>
<img alt="Australia" src="/Images/Services%20button_tcm7-9688.gif"/>
</a>
<div class="text">
<h2>
<a href="/partnerzone/downloadarea/school-information/australia/index.aspx">Australia</a>
</h2>
<p>Land of the sunshine!</p>
</div>
</div>
<div class="threeimages">
<a>
<img alt="Belgium" src="/Images/Services%20button_tcm7-9689.gif"/>
</a>
<div class="text">
<h2>
<a href="/partnerzone/downloadarea/school-information/belgium/index.aspx">Belgium</a>
</h2>
<p>Land of beer and food!</p>
</div>
</div>
<script src="./content/js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="./content/js/dupetargets.js" type="text/javascript"></script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
