Question

我想要一个纯JavaScript代码，它将更改图像及其与另一个图像的链接以及与切换功能相同位置的另一个链接。我有一个网页，我有{strong>锚点链接按钮为<a href="#DIV2"><img src="DownArrow.png"/></a>，我希望在点击此图片后，首先它会引导您进入DIV2，然后它会将代码更改为<a href="#DIV1"><img src="UpArrow.png"/></a>。如何使用纯JavaScript做到这一点？等待完美的回复和代码？

Answer 1

这应该有效：

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';
    }
}

在此处查看此行动：http://jsfiddle.net/TM9ap/7/

请注意，我已将链接中的href属性更改为#DIV1，如此<a href="#DIV1">

Answer 2

<!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>

如何更改图像和链接单击作为切换功能？

2 个答案: