Question

我目前正在使用以下文字作为隐藏和显示文字的简单方法。我试图做的是使用css显示带有背景图像的标签：

在隐藏文本时有一个加号。

然后在显示文本时有一个减号，并且您想再次隐藏文本。

JavaScript的：

function toggle() {
    var ele = document.getElementById("toggleText");
    var text = document.getElementById("displayText");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "Show";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "Hide";    
    }
}

HTML：

<a id="displayText" href="javascript:toggle();">Show Further Details & Specification</a>
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

Answer 1

下次尝试在jsfiddle中发布您的代码您的代码存在一些问题，首先更好的是放置事件处理程序而不是将javascript代码放在href属性中，更容易使用变量来保存切换按钮的状态。如果您使用内联而不是阻止

显示元素，则几乎99％的时间都可以使用

var textHidden = true;
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(textHidden) {
    ele.style.display = "inline";
    text.innerHTML = "Show";
    textHidden = false

}
else {
    textHidden = true
    ele.style.display = "none";
    text.innerHTML = "Hide";

}
}

HTML：

<a id="displayText" href="#" onclick="toggle();">Show Further Details Specification</a>    
<div id="toggleText" style="display:none;"><h1>peek-a-boo</h1></div>

Answer 2

您需要为“displayText”设置CSS，以便为其提供背景。

这样的事情：

#displayText {
    display:block;
    height:20px;
    padding-left:30px;
    background-image:url(../images/plus.png);
}

然后将图像换成备用状态：

#displayText.active {
    background-image:url(../images/minus.png);
}

因此，在您的代码中，您需要根据切换状态在displayText上添加/删除“活动”类名。

P.S。对于JS事件使用“href”被认为是不好的形式。最好使用onclick。

<a id="displayText" href="javascript://"  onclick="toggle();">

javascript切换功能隐藏和显示文本 - 如何添加图像

2 个答案: