爆雷部分一直反白 我自己也覺得超煩... 天氣好熱更覺得煩...
其實跑論壇與其他網站，早就已知有這類語法～總之終於來試試囉...@@a
法１：只能點擊顯示，無法點擊隱藏．參考站Ａ１樓（作者 Bryan）．
如上，因為使用超連結 a，所以文字顯示會是藍字底線（有點醜？）
pixnet 文章編輯頁面 可以直接點擊顯示，打文上會便利許多．可是不能點回隱藏... 會感覺有點技術不好XD;
用 onclick 點擊觸發 JavaScript -> 用 document.getElementById 取得 ID 為 aaa 的元素 並開啟顯示．
|
<a onclick="document.getElementById('aaa').style.display=''" href="javascript:;">【點擊顯示 捏他文字】</a>
<div id="aaa" style="display: none;"> 原本被隱藏的文字<br /> 原本被隱藏的文字第２行</div>
|
|
實測／示範：
【點擊顯示 捏他文字】
原本被隱藏的文字
原本被隱藏的文字第２行
法２：可點擊顯示＆點擊隱藏．參考站Ａ３樓（同作者 Bryan）．
與法４差異：此法２可以「顯示在行內」，而不會自成一段落 = 上下左右都會留白．
javascript 的 html 標籤 <script></script> ，貼進 pixnet 發文的 html 內之後，
會自動被 pixnet 改成 <script type="text/javascript">// <![CDATA[ ..... // ]]></script>
隨意解讀XD（我對 JS 完全沒有研究喔XD|||）：點擊啟動 show22() 函數 ->
當 isShow 值為 true 時，ID hide22 顯示，且改寫 ID show22 內文為【點擊隱藏】
當 isShow 值為 false 時，ID hide22 不顯示，且改寫 ID show22 內文為 【點擊顯示 捏他文字】
函數名最好與 ID 同名，免得「同篇文章中」很多此語法時～會忘記改到函數名稱orz（因為是用取代批次）
|
<!-- 爆雷文 上方-----------------------------------------------------------------------★★★ -->
<a id="show22" onclick="show22()" href="javascript:;">【點擊顯示 捏他文字】</a>
<div id="hide22" style="display: none;">原本被隱藏的文字<br />原本被隱藏的文字第２行</div>
<script>
var isShow = false;
function show22() {
if(!isShow) {
isShow = true;
document.getElementById('hide22').style.display='';
document.getElementById('show22').innerText = "【點擊隱藏】";
}
else {
isShow = false;
document.getElementById('hide22').style.display='none';
document.getElementById('show22').innerText = "【點擊顯示 捏他文字】";
}
}
</script>
<!-- 爆雷文 下方-----------------------------------------------------------------------★★★ -->
|
|
實測／示範：
【點擊顯示 捏他文字】
原本被隱藏的文字
原本被隱藏的文字第２行
法３：可點擊顯示＆點擊隱藏．參考站Ｂ回答２（作者 暐翰）．
這是用內文段落 div 的範例 ... 所以會以普通內文方式呈現，而非超連結 a 呈現．
小常識：函數名稱、ID 不要重複，不然會開啟錯區塊XD 當然命名也不要太常見，免得與網站本身語法重複
這幾個語法，關於瀏覽器文件 JavaScript Document (wibibi)，關於 document.getElementById()
隨意解讀：點擊啟動 show1() 函數 ->
當 id hide1 沒顯示時：將 hide1 改為區塊顯示 ，並改寫 show1 內文為【點擊隱藏】
當 id hide1 有顯示時：將 hide1 改為不顯示 ，並改寫 show1 內文為【點擊顯示 捏他文字】
|
<div id="show1" onclick="show1()"> 【點擊顯示 捏他文字】</div>
<div id="hide1" style="display: none;"> 原本被隱藏的文字<br /> 原本被隱藏的文字第２行</div>
<script type="text/javascript">// <![CDATA[
function show1() {
var show1 = document.getElementById('show1');
var hide1 = document.getElementById('hide1');
if (hide1.style.display === 'none') {
hide1.style.display = 'block';
show1.innerText = " 【點擊隱藏】";
}
else {
hide1.style.display = 'none';
show1.innerText = " 【點擊顯示 捏他文字】";
}
}
// ]]></script>
|
|
實測／示範：
【點擊顯示 捏他文字】
原本被隱藏的文字
原本被隱藏的文字第２行
法４：上述的花俏版 與法２差異：此法４會「自成一段落」，而不能「顯示在行內」．
純黑文字很難讓訪客知道是按鈕，所以「可點擊 觸發事件的文字」，應該要「長得像按鈕」。
問題又回到～我們不是真的架站，而是在文章內文！所以不是用 真的按鈕語法（button 或 input 等）
比如說這樣 這用 pixnet 寫文功能無法辦到，要去 html 打上下左右邊框... 回到 css 的小常識。
由於是應用在 PIXNET 內文，而非真的去架站．
也就是說 不方便把 CSS 統一設定／整理在原始碼最上方（架站會乾淨簡潔許多，要用時以 ID 或 class 叫出）
樣式不能打在行內 <span style=""></span>，這樣只會在第１次顯示，當點擊過後，就只顯示純文字．
|
<!-- 爆雷文 上方-----------------------------------------------------------------------★★★ -->
<div id="show2" onclick="show2()" style="background-color: #6182a3; border: 5px solid #99CCFF; border-radius: 5px; color: #ffffff; width:200px; margin-left:20px; text-align:center;">★ 點擊顯示 爆雷文字 ★</div>
<div id="hide2" style="display: none;"> 原本被隱藏的文字<br /> 原本被隱藏的文字第２行</div>
<script type="text/javascript">// <![CDATA[
function show2() {
var show2 = document.getElementById('show2');
var hide2 = document.getElementById('hide2');
if (hide2.style.display === 'none') {
hide2.style.display = 'block';
show2.innerText = "★ 點擊隱藏 ★";
}
else {
hide2.style.display = 'none';
show2.innerText = "★ 點擊顯示 爆雷文字 ★";
}
}
// ]]></script>
<!-- 爆雷文 下方-----------------------------------------------------------------------★★★ -->
|
|
實測／示範：
★ 點擊顯示 爆雷文字 ★
原本被隱藏的文字
原本被隱藏的文字第２行
|
其他：html 的「隱藏分隔線」
由於使用以上 html/css 去打文，又是在沒有自動分層／分色的最原始頁面！一定有快要瞎掉的感覺...
所謂「隱藏分隔線」～也就是不會顯示在網頁中，只會出現在原始碼的... 專業點(XD)稱為「註解」啦．
打 CSS 的人一定知道的 /* 裡面是註解 */，在 HTML 則是 <!-- 裡面是註解 -->，JS 單行註解是 //只能單行
這是用來避免在一片黑字的 HTML 打文時，不小心截斷掉 JS，或～就是方便快速找位置啦XD"
當然世界上也有些方便的小工具：HTML 線上整理器，如 HTML Formatter，自動上色＆縮排 分階層．
實際應用範例：如本人此篇 2020.7 [Netfliex感想] 內政保鑣（Bodyguard）S1, 窒風（Deadwind，芬蘭影集）S1 , 越獄風雲（Prison Break）S1 全22
該篇文總共使用了「法４」４次，「法２」２次．
也就是我總共生出 12 種 ID 名稱，６種函數名稱 ... 函數名稱若重複，也會開錯 = 執行到上個語法的函數XD"
-＊-＊-♤-＊-＊-♤-＊-＊-♤-＊-＊-
P.S. 不小心注意到，pixnet 的側欄廣告 害我網誌跑框了 囧|||
好像我美感有問題似的～側欄最右側 留白間距消失orz 這麼肯定是廣告造成... 是經過 n 小時的檢測orz
從文章所有欄位：檢查各篇打文 有無出錯或空白（大於 695 px），其他非打文的欄位寬度（可能官方動了語法）
以 chrome 開啟沒有跑框，但 chrome 有裝 AdBlock XD <- 其實主要用來擋 Xuite 與中國站過多 低水準廣告
chrome 沒登入． 繼續檢查：是否為登入差異（如 有登入會多出 前台各篇文 下方的編輯列(按鈕)）、
側欄所有區塊寬度（用檢測元素～寬度是沒錯都 235 px... 但又都位移了囧）、廣告區塊寬度 好像也沒問題???
當然，我現在修好了～故知道不是誣陷他們XD" 總之反覆用不同方法...最後以奇妙方式解決...：
(1) 要關掉 PIXNET 廣告，必須先開啟 PIXNET 廣告... 官方邏輯問題 還是故意預設？
(2) 參考此站教學：後臺點選開啟 MIB 分潤，裡面所有廣告欄位「都點選關閉」．
(3) 側欄影音廣告依然存活．但！跑框問題竟然就此解決 = =||| 可惡啊還我這幾小時的生命....orz
|
|
＊＊♥ ． ♣ ． ♦ ． ♠ ． E N D ． ♠ ． ♦ ． ♣ ． ♥
|
留言列表
【Comic】漫畫 (6)
