JavaScript 應用：顯示/ 隱藏（一）

JavaScript 應用：顯示/ 隱藏（一）

何謂顯示/ 隱藏？

隱與藏不同，「隱」指本來顯示的項目隱了形，原來顯示項目的地方變成空白，css 稱「隱」為「invisible」。按一下連結，看看顯 / 隱的示例。

步驟 1：搜尋

下列程式為本站所開發，非搜尋所得。

步驟 2：織網

編寫新網頁。網頁中應已據 css 標準界定了 class，下面是一個例子：

<body>

......

<p class="chi">第一。</p>
<p class="eng">first.</p>
<p class="chi">第二。</p>
<p class="eng">second.</p>
<p class="chi">第三。</p>
<p class="eng">third.</p>

......

</body>

步驟 3：程式

把下列語句加在網頁原始檔中的 head 之內。

<head>

......

<script> function show(obj,cn) { for (i = 0; i < document.all.length; i++){ if (document.all(i).className==cn) { switch (document.all(i).style.visibility) { case "visible": document.all(i).style.visibility = "hidden"; obj.value="顯示"+obj.value.slice(2,obj.value.length); break; case "hidden": document.all(i).style.visibility = "visible"; obj.value="隱藏"+obj.value.slice(2,obj.value.length); break; default: document.all(i).style.visibility = "hidden"; obj.value="顯示"+obj.value.slice(2,obj.value.length); break; } } } } </script>

......

</head>

步驟 4：啟動

把下列語句的起動部份加到網頁原始檔的 body 之內，至於放在 body 之中的哪兒，則由網頁計設者自行從頁面設計上考慮。

<body>

......

......

</body>

步驟 5：調校

這是最重要的部份：調校有關參數。

須調校的都在啟動部份，即啟動部份中的「xx」、「ClassNameX」兩項目，例如改成：

<body>

......

<p class="chi">第一。</p>
<p class="eng">first.</p>
<p class="chi">第二。</p>
<p class="eng">second.</p>
<p class="chi">第三。</p>
<p class="eng">third.</p>

......

<input type="submit" value="隱藏中文" onclick="show(this,'chi')"/>
<input type="submit" value="隱藏英文" onclick="show(this,'eng')"/>

......

</body>

1. 修改啟動按鈕的文字：啟動按鈕中的「隱藏xx」中的「xx」可據實際內容隨意修改；

2. 修改顯示或隱藏的 class：例如要顯示或隱藏「class="chi"」的內容，便根據所界定的 class 名稱，把啟動部份中的「ClassNameX」修改為「chi」；

3. 啟動按鈕不限數目，上文示例用了兩個啟動按鈕，如有需要，用上多少個也可以，只須根據實際情況修改啟動按鈕中「隱藏xx」中的「xx」和「ClassNameX」。

步驟 6：試用

試用後把編寫好的網頁上載到伺服器上。