JavaScript小程式:顯示第n個物件其餘隱藏

在我們設計網頁的時候,常常會出現一種情形:這個網頁有好幾段文字,但我不想同時顯示(畢竟現代人不喜歡一次看太多字),這時候該怎麼做呢?有些人會使用「錨」的方式把網頁拆成好幾段,目錄放在最上面,但是網頁捲軸往下拉還是看得到所有的內容(例如本站程式地圖),以隱藏資訊來說這不是個好方式。辛苦一點的方法就是做好幾個HTML網頁,但這樣有點累人,如果網頁內容是從資料庫讀取,也可能會增加Server端的負荷(一次可以全部讀完的內容分成好幾次讀)。有些人會利用 jQuery UI 提供的頁籤(Tabs)功能來達成這個需求(參考官網範例),但是美工的設計上就會受到限制。

要完成這樣的功能,其實很簡單,只要利用CSS裡的display屬性(參考CSS圖層控制),再配合JavaScript修改即可。它的程式概念是這樣的:「我總共有total個物件,一次只顯示一個物件,我要顯示第n個物件(其餘隱藏)。」,參考JavaScript程式碼如下:

function rotateShow(n, total, idstr) {
    //以字串idstr為id的物件共有totle個,顯示第n個,其餘隱藏
    for(var i=1; i<=total; i++) {
        //將所有的物件隱藏
        var e = document.getElementById(idstr + i);
        e.style.display = "none";
    }
    //顯示第n個物件
    document.getElementById(idstr + n).style.display = "inline";
}

我們要顯示的內容必須指定一個ID,相同系列的ID必須有一樣的前綴詞,後面加入流水號(請勿斷號)。參考的範例如下,前綴詞是”myContent-“,並且總共有 3 個物件:

第一段
第二段
第三段

如此一來就可以用連結來顯示指定的內容:

顯示第一段
顯示第二段
顯示第三段

聰明的你相信已經發現了,它的內容可以是圖片、是文字,可以是任何形式的網頁物件,只要能用ID命名,或是用DIV包起來。連結的形式也不限文字,可以是圖片,或是其它用DIV包起來的物件(改用onClick觸發)。只要設定的前綴詞不同,可以在一個網頁上使用好幾次這種功能,而且JavaScript只需要寫一次。除了頁籤之外,”下一頁”的功能也可以用這種方式來完成(網頁已經載入全部的內容,只是分頁顯示)。這隻程式唯一的缺點就是沒有特效(有需要的人就請自行修改嘍)。

以下是注意事項:

  1. 相同系列的內容ID必須有一樣的前綴詞。
  2. 前綴詞後面加入流水號,請勿斷號,或擅字填0。
  3. 呼叫rotateShow()傳入的參數分別是:顯示第n個物件、此系列物件總個數(相同系列呼叫時,數字應相同)、物件ID的前綴詞。
  4. 在物件下面進行初始化物件,否則第一次載入網頁時會全部顯示(或是直接在物件上加入 style=“display:none” 屬性)。