0

我最近得到了这个简单的脚本来显示/隐藏 html 页面的几个部分。我使用它通过单击小的“+”和“-”来显示/隐藏 div 的内容：

    function toggle1() {
    var ele = document.getElementById("toggleText1");
    var text = document.getElementById("displayText1");
    if(ele.style.display == "block") {
            ele.style.display = "none";
        text.innerHTML = "+";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "-";
    }
}

随着：

<a href="javascript:toggle1();" class="txt_side_table_cmd" id="displayText1><img src="imgs/up.gif" /></a>
<div id="toggleText1" style="display: block">Content here</div>

该代码工作正常，但我正在尝试将“+”和“-”文本链接更改为图像链接。我对 Javascript 知之甚少，我尝试了各种修改，使其变得最糟糕。此原始脚本位于外部 .js 文件中。

关于如何将文本链接更改为图像链接的任何想法？

非常感谢你

4

2 回答 2

1

您的 id 值未正确关闭。因为那document.getElementById("displayText1")是未定义的。所以试试这个

<a href="javascript:toggle1();" class="txt_side_table_cmd" id="displayText1">

而不是你的

<a href="javascript:toggle1();" class="txt_side_table_cmd" id="displayText1>

希望这可以帮助...

于 2013-10-25T17:55:02.107 回答
0

如果我理解正确，您可以提前制作图片链接，然后将它们附加到之前的“+”和“-”元素：

var showControlImage = new Image(),
    hideControlImage = new Image();

showControlImage.src = "path/to/showImage.png";
hideControlImage.src = "path/to/hideImage.png";

// Then just use your toggle function with minor changes:
function toggle1() {
    var ele = document.getElementById("toggleText1");
    var text = document.getElementById("displayText1");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "";
        text.appendChild = showControlImage;
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "";
        text.appendChild = hideControlImage;
    }
}

此外，您应该按照Chandan 的建议清理您的标签。

于 2013-10-25T17:50:15.797 回答