javascript toggle功能隱藏和顯示文本 - 如何添加圖像

我目前使用下面的文本作爲隱藏和顯示我的文本的簡單方法。我試圖做的，但也是使用CSS來顯示背景圖像的標籤：javascript toggle功能隱藏和顯示文本 - 如何添加圖像

一個有一個加號，當文字被隱藏。

然後一個有一個負號，用於顯示文本的時間並且你想再次隱藏文本。

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

來源

2012-02-14 Suzi Larsen

您需要設置了CSS的「displayText」給它的背景。

事情是這樣的：

#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();">

來源

2012-02-14 16:18:20

下一次嘗試後你的代碼jsfiddle 有一些問題與您的代碼，首先是更好地把事件處理程序，而不是把JavaScript代碼href屬性，更容易使用一個變量保存切換按鈕的狀態。

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

來源

2012-02-14 16:20:24

三江源，它一直很大：如果你顯示你的元素與內聯，而不是阻止

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工作時代的近99％。我使用了onclick而不是將其放入href中。 – 2012-02-15 16:35:02

是否有任何理由爲什麼在函數中定義'ele'和'text'變量，而不是在它之外？ – JNat 2014-04-12 11:20:37

不，但實際上如果你想提高IE 6和7的性能，你應該設置爲null，不再使用所有變量（比如函數末尾的ele和text），這樣它們可以被垃圾收集。 – 2014-04-28 14:10:22

javascript toggle功能隱藏和顯示文本 - 如何添加圖像

回答

相關問題