javascript 如何使用javascript更改显示隐藏上的切换文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4672984/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change toggle text on show hide using javascript
提问by wow
Example
例子
<script type="text/javascript">
function showme(id) {
var divid = document.getElementById(id);
if (divid.style.display == 'block') divid.style.display = 'none';
else divid.style.display = 'block';
}
</script>
<a onclick="showme('widget');" href="#">Show Widget</a>
<div id="widget" style="display:none;">
This is a widget
</div>
I want change text Show Widget& Hide Widget. Let me know
我想更改文本Show Widget& Hide Widget。让我知道
回答by Matt Hamsmith
<script type="text/javascript">
function showme(id, linkid) {
var divid = document.getElementById(id);
var toggleLink = document.getElementById(linkid);
if (divid.style.display == 'block') {
toggleLink.innerHTML = 'Show Widget';
divid.style.display = 'none';
}
else {
toggleLink.innerHTML = 'Hide Widget';
divid.style.display = 'block';
}
}
</script>
<a id="toggler" onclick="showme('widget', this.id);" href="#">Show Widget</a>
<div id="widget" style="display:none;">
This is a widget
</div>
回答by wajiw
You can change the text in your toggle block like this:
您可以像这样更改切换块中的文本：
<script type="text/javascript">
function showme(id) {
var divid = document.getElementById(id);
if (divid.style.display == 'block') {
divid.style.display = 'none';
$('#toggleDisplay').text('Show Widget');
}
else{
divid.style.display = 'block';
$('#toggleDisplay').text('Hide Widget');
}
}
</script>
<a onclick="showme('widget');" href="#" id="toggleDisplay" >Show Widget</a>
<div id="widget" style="display:none;">
This is a widget
</div>
回答by Shahid
<script type="text/javascript">function showme(id) {var divid = document.getElementById(id);var clicky = document.getElementById("clicky");if (divid.style.display == 'block') {divid.style.display = 'none';clicky.innerHTML = "Show Widget";}else {divid.style.display = 'block'; clicky.innerHTML = "Hide Widget";}
}</script>
<script type="text/javascript">function showme(id) {var divid = document.getElementById(id);var clicky = document.getElementById("clicky");if (divid.style.display == 'block') {divid.style.display = 'none';clicky.innerHTML = "Show Widget";}else {divid.style.display = 'block'; clicky.innerHTML = "Hide Widget";}
}</script>
<a onclick="showme('widget');" href="#" id="clicky">Show Widget</a>
<a onclick="showme('widget');" href="#" id="clicky">Show Widget</a>
<div id="widget" style="display:none;">This is a widget</div>
<div id="widget" style="display:none;">This is a widget</div>
