教程 | 显示/隐藏 按钮

- Tutorial requested by 嘉潓 -

我是效果 :)

此乃效果图 :)

1. 设计 → 页面元素 → 添加小工具 → HTML/JavaScript

2. 添加以下代码：

<div id="spoiler" style="display: none;">
被隐藏的内容</div>
<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" title="Click to show/hide content" type="button">显示 | 隐藏</button>

3. 保存，即可。

小解释
红色代码：你要隐藏的内容
蓝色代码：你要显示在按钮的字

我是效果 :)

此乃效果图 *有背景*

1. 设计 → 页面元素 →添加小工具 → HTML/JavaScript

2. 添加以下代码：

<center><div id="spoiler">

<div>

<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" style="-moz-border-radius: 5px; background-image: url(背景 url); border-radius: 5px; border-style: 2px solid #ff9fcc; font-size: 12px; margin: 13px; padding: 0px; width: 250px;" type="button" value="显示 | 隐藏" />

<div id="show" style="background-color: transparent; background-repeat: repeat; border-width: 0px; display: none; margin: 0px; padding: 3px; width: 90%;">

被隐藏的内容</div>

</div>

</div></center>

 3. 保存，即可。

小解释

红色代码：你要隐藏的内容

蓝色代码：你要显示在按钮的字

紫色代码：背景的 url - 可在 FREEBIES 找到

靛色代码：按钮的弧度（可更改）

橙色代码：边框的粗、类型、颜色（可更改）

若要分段，可以添加代码 <br> 在分段的内容那里。