如何在Javascript中替换href值
[英]How to replace href value in Javascript
问题描述
I have the following code which changes the big image according to the thumbnail clicked (this part is working).
我有以下代码根据单击的缩略图更改大图像（这部分正在工作）。
I want to change accordingly the url in the href (so that each big image shown has a link to another URL).我想相应地更改 href 中的 url（以便显示的每个大图像都有一个指向另一个 URL 的链接）。 <-- this last part is not working. <-- 这最后一部分不起作用。
----------HERE IS THE CODE ---------------------- ----------这里是代码 -------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>image swapping </title>
<script type="text/javascript">
function init(){
th=document.getElementById('thumbs').getElementsByTagName('img');
for(c=0;c<th.length;c++) {
th[c].onclick=function() {
swapImage(this.src);
swapFile(this.href);
}
}
}
function swapImage(url){
str=url.lastIndexOf(".");
str1=url.substring(str-1);
str2=url.substring(str);
url=url.replace(str1,str2);
document.getElementById('bigpic').src=url;
}
function swapFile(url){
str=url.lastIndexOf(".");
str1=url.substring(str-1);
str2=url.substring(str);
url=url.replace(str1,str2);
document.getElementById('file').href=url;
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>
</head>
<body>
<div>
<a href="01.html" id="file"><img id="bigpic" src="images/01.jpg" alt=""></a>
</div>
<div id="thumbs">
<img src="images/01t.jpg" alt="01t.jpg">
<img src="images/02t.jpg" alt="02t.jpg">
<img src="images/03t.jpg" alt="03t.gif">
<img src="images/04t.jpg" alt="04t.png">
<img src="images/05t.jpg" alt="05t.png">
<img src="images/06t.jpg" alt="06t.png">
</div>
</body>
</html>
4 个解决方案
解决方案1
1 2014-01-19 22:08:54
This question might get flagged as a duplicate, but here's the answer anyway. 这个问题可能会被标记为重复，但这仍然是答案。
To change the href value of an anchor: 更改锚的href值：
document.getElementById('file').setAttribute('href',url);
解决方案2
1 2014-01-19 22:42:18
You need to change logic slightly...Thumbnails doesn't have links, right? 您需要稍微更改逻辑...缩略图没有链接，对吗？
<script>
function init(){
th=document.getElementById('thumbs').getElementsByTagName('img');
for(c=0;c<th.length;c++) {
th[c].onclick=function() {
swapImage(this.src);
swapFile(this.getAttribute("alt"));
}
}
}
function swapImage(url){
str=url.lastIndexOf(".");
str1=url.substring(str-1);
str2=url.substring(str);
url=url.replace(str1,str2);
document.getElementById('bigpic').src=url;
}
function swapFile(hurl){
str=hurl.lastIndexOf(".");
str1=hurl.substring(str-1);
str2=hurl.substring(str);
hurl=hurl.replace(str1,str2);
hurl=hurl.replace('.jpg','.html'); // for html extension at the end of the link
document.getElementById('file').href=hurl;
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>
Html: HTML：
<div>
<a href="01.html" id="file"><img id="bigpic" src="images/01.jpg" alt=""></a>
</div>
<div id="thumbs">
<img src="images/01t.jpg" alt="01t.jpg">
<img src="images/02t.jpg" alt="02t.jpg">
</div>
解决方案3
0 2014-01-19 22:52:08
I ran the code in Firebug, and found the error: 我在Firebug中运行了代码，发现了错误：
th=document.getElementById('thumbs').getElementsByTagName('img');
for(c=0;c<th.length;c++) {
th[c].onclick=function() {
swapImage(this.src);
swapFile(this.href);
}
}
}
"this" refers to th[c], and now look at your image tags: “ this”指的是th [c]，现在来看一下您的图片标签：
<img src="images/01t.jpg" alt="01t.jpg">
<img src="images/02t.jpg" alt="02t.jpg">
<img src="images/03t.jpg" alt="03t.gif">
They don't have href attribute, so your swapFile function fails and terminates script execution. 它们没有href属性，因此您的swapFile函数将失败并终止脚本执行。 You could add custom attributes to these images: 您可以向这些图像添加自定义属性：
<img href="link1" src="images/01t.jpg" alt="01t.jpg">
<img href="link2" src="images/02t.jpg" alt="02t.jpg">
<img href="link3" src="images/03t.jpg" alt="03t.gif">
But images are not anchors, so th[c].href will not give you the value. 但是图像不是锚点，因此th [c] .href不会给您带来价值。
Here's the new init function: 这是新的init函数：
function init(){
th=document.getElementById('thumbs').getElementsByTagName('img');
for(c=0;c<th.length;c++) {
th[c].onclick=function() {
swapImage(this.src);
swapFile(this.attributes.href.value); // <-- fixed this line
}
}
}
I have tested the code locally and it runs. 我已经在本地测试了代码，它可以运行。
解决方案4
0 2021-11-13 07:21:15
<html>
<head>
<script>
function red(){
var a = document.getElementById("your_tag_name");
a.href = 'www.thelinkyouwanttoadd.com';
}
</script
</head>
<body>
<a id="your_tag_name" href="www.google.com" onclick="red()">
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.