4/25/2012

在文章裡顯示 文字/圖片 收合

有時候逛論壇或是網站，會發現文章點進去有些內容會縮起成一個連結不會顯示，想看哪部分點下後才會滑出來，不會一載入就顯示落落長的頁面，此功能可以大幅精簡文章的樣式，讓文章排版看起來更整齊乾淨

範例：
請按一下我

使用方法：
1. 將以下程式碼貼到<body>與</body>與之間，部落格可直接用在文章編輯器下
<a style="cursor:pointer" onclick="var yudan = getElementById('yudan'); 
yudan.style.display=yudan.style.display=='none'?'':'none'">請按一下我</a>
<div id="yudan" style="display:none">這裡可放任何東西</div>

修改：
1. 請按一下我：要點擊展開的開關，可自行修改
2. 這裡可放任何東西：請自行修改成要隱藏的文字或圖片
3. 增加項目方法，將以下yudan改為另一組英文字
<a style="cursor:pointer" onclick="var yudan = getElementById('yudan'); yudan.style.display=yudan.style.display=='none'?'':'none'">請按一下我</a>
<div id="yudan" style="display:none">這裡可放任何東西</div>
注意：
1. 在撰寫畫面下，會看不到隱藏內容，如果需要用到撰寫畫面編輯文字樣式...等，請都編輯好了再使用以此語法
2. Blogger使用者，程式碼貼在HTML下之後，請勿切回撰寫畫面瀏覽，程式碼會因此改變，發佈後此功能會失敗，文字會隱藏但點不出來，之後修改也請比照這種方式送出，其他部落格不清楚有沒有此問題

參考來源 魚蛋村

這篇文章對您有幫助嗎？
於

No comments:

Post a Comment