Fatal编程技术网
  • javascript/
  • Javascript 如何更改图像和链接的点击切换功能？

Javascript 如何更改图像和链接的点击切换功能？

javascript css html

Javascript 如何更改图像和链接的点击切换功能？,javascript,css,html,anchor,Javascript,Css,Html,Anchor,我想要一个纯JavaScript代码，它将改变一个图像及其到另一个图像的链接，以及切换函数所在位置的另一个链接。我有一个网页，我有锚定链接按钮作为，我希望在单击此图像后，首先它将引导您到DIV2，然后它将代码更改为。如何使用纯JavaScript实现这一点？等待完美的回复和代码？这应该可以： var link = document.querySelector('#arrow a'); link.onclick = function() { var image = document.que

我想要一个纯JavaScript代码，它将改变一个图像及其到另一个图像的链接，以及切换函数所在位置的另一个链接。我有一个网页，我有锚定链接按钮作为
，我希望在单击此图像后，首先它将引导您到DIV2，然后它将代码更改为
。如何使用纯JavaScript实现这一点？等待完美的回复和代码？

这应该可以：

var link = document.querySelector('#arrow a');
link.onclick = function() {
    var image = document.querySelector('#arrow a img');
    if(this.href.slice(-1) === '1') {
        this.href = '#DIV2';
        image.src = 'https://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/1uparrow.png';
    } else {
        this.href = '#DIV1';
        image.src = 'https://cdn1.iconfinder.com/data/icons/nuvola2/48x48/actions/1downarrow.png';
    }
}
请在此处查看它的实际操作：

请注意，我已将链接中的
href
属性更改为
#DIV1
，如下所示 函数execute（） { if（document.getElementsByTagName（“a”）[0].getAttribute（“href”）=“DIV1”）{ var img=document.getElementsByTagName（“img”）[0]； setAttribute（“src”、“DownArrow.png”）； img.parentNode.setAttribute（“href”，“DIV2”）； } 其他的 { var img=document.getElementsByTagName（“img”）[0]； setAttribute（“src”、“UpArrow.png”）； img.parentNode.setAttribute（“href”，“DIV1”）； } }
@KundanSinghChouhan我尝试了很多代码，但都在改变图像。我也想更改链接。@chandu Ok。给你。现在再给我读一次问题。 
<!DOCTYPE html>

<html>
<title></title>
<head></head>
<body>
<a href = "#DIV1" style="color:BLACK;" onclick="execute();">Click me 
    <img src="UpArrow.png" />
</a>
<div id="DIV1" ></div>

<div id="DIV2" ></div>  
<script>


function execute()
{

if ( document.getElementsByTagName("a")[0].getAttribute("href")==="#DIV1"){
    var img = document.getElementsByTagName("img")[0];
    img.setAttribute("src","DownArrow.png");
    img.parentNode.setAttribute("href","#DIV2");
}
else 
{


    var img = document.getElementsByTagName("img")[0];
    img.setAttribute("src","UpArrow.png");
        img.parentNode.setAttribute("href","#DIV1");
}

}




</script> 

</body>
</html>