越努力越幸运。
不管如何,我比你努力,比你好,比你更问心无愧。

2017.02.22

教程 | 显示/隐藏 按钮


- 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> 在分段的内容那里。

10 comments:

  1. 你都關了那個右鍵~
    醬子我們不是要一個字一個字慢慢打 !?

    ReplyDelete
    Replies
    1. 可以按 Ctrl+C 拷贝代码啊 ;)

      Delete
  2. 如果我要隐藏 MP3 Player , 但是我还是要让它自动 play , 要怎样? 就好像你的 player 酱

    ReplyDelete
    Replies
    1. 嗯、你应该回复在错的帖子了啦 x)
      你用的是 YouTube 播放器吧?
      在代码里面寻找 autoplay= ,然后后面的号码由 '0' 改成 '1' ;)
      记住哦,有两个 autoplay= 的代码,两个都要改哦 ^^

      Have a nice day, BII.

      Delete
  3. 我用 mp3 player , 可是我想弄得好像你的 player 酱 , 然后我不知道是哪1个教程 ... ><

    ReplyDelete
    Replies
    1. 哦、哦~ 我使用的是 YouTube 播放器丫 ;))
      教程:http://cocovscoconut.blogspot.com/2012/06/youtube.html

      Have a nice day, BII.

      Delete
  4. 背景可不可以放颜色不要放图片?

    ReplyDelete
    Replies
    1. 可以啊 :)
      将 background: url(图片网址); 改成 background: #颜色代码;

      -replied by BII.

      Delete
  5. 如果是Blogskin 呢?教程一样吗?

    ReplyDelete

っ 谢谢你耐心的看完这篇帖子 ♥
っ 评论将在博主审核后发布,如有不便,敬请原谅哦 :)
っ 除了评论之外,亲也可以选择在 Cbox 留言或 PM 我的部落格专页信箱

ベ 请用词确切,勿使用脏字哟
ベ 部落格不接受匿名评论,评论前请确保你拥有 Google Account 哦
ベ 请仔细列明你的问题好方便我回答哦 :)

* 感谢你的留言,欢迎下次再来。