以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

分頁設計(2)-控制分頁顯示

分頁設計中,第一篇文件(分頁設計(1)-CSS組成)說明了如何使用 CSS 樣式進行分頁設計,再來就是分頁的控制,先看例子:

 

當點選在 Link 1 - Link 5 字樣時,就能切換分頁顯示效果,這在下一篇文件中要說明使用區塊(<DIV>)或內置頁框(<IFRAME>)時,才能真正達到不換頁效果。

引用方法為:

  1. 將以下 Javascript 程式碼複製到頁面中
    function loadTab(obj){

    //將 Tab 標籤樣式設成 Blur 型態
    var tabsF=document.getElementById('tabsF').getElementsByTagName('li');
    for (var i=0;i<tabsF.length;i++){
        tabsF[i].setAttribute('id',null);
    }

    //變更分頁標題樣式
    obj.parentNode.setAttribute('id','current');

    }

  2. 在分頁超連結中,加入上述執式碼,例如:
    <li><a href="javascript://" onclick="loadTab(this);"><span>Link 2</span></a></li>

loadTab() 簡單針對早已定義在 tabsF 中分頁進行處理,原理是先把所有 <li> 標籤的樣式清除,再把適當的分頁,加上 current 樣式,使這個分頁能突顯,看起來就像是按下分頁一樣。

下載本範例

卜維丰 12/4 07'

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

nenitacotilla.weebly.com   2017/5/21 上午 11:18:00

I read this piece of writing fully on the topic of
the resemblance of hottest and previous technologies, it's remarkable article.

manicure   2017/5/4 上午 08:24:00

Great post. I used to be checking continuously this
weblog and I am impressed! Very useful information specifically the last part :) I care
for such information much. I was looking for this certain information for a long time.
Thank you and best of luck.

manicure   2017/4/11 下午 06:45:00

you're in reality a excellent webmaster. The
web site loading pace is amazing. It sort of feels that you're doing any distinctive trick.
In addition, The contents are masterpiece.

you have done a magnificent task on this topic!

卜維丰   2010/9/28 下午 04:18:00

小志,

this 相當於物件, 你要還原成某個狀態, 把預設狀態以物件傳入, 例如使用 document.getElementById

小志   2010/9/23 下午 12:13:00

老師您好:

onclick="loadTab(this);"

this 是 javascript://

假如在畫面重新load進來,要將分頁變更至上次所瀏覽的頁面,this 要怎麼取代

粘糕   2009/8/6 下午 04:39:00

不好意思想請問一下如果要改變她的大小要如何修改

卜維丰   2008/5/16 下午 12:05:00

ccy, 最後一行 </script> 也要拿掉

卜維丰   2008/5/11 上午 04:03:00

ccy, 一般丟幾支程式擺著, 自己提不出問題, 要我抓 BUG 的, 通常我也就擺著

我挑了 js 先看, 我只能告訴你, 基本觀念要加強, 你的 js 檔, 本身就是錯的, 不是內容錯, 是根本上這不是 js 外部檔的寫法, 其他就不用測了

ccy   2008/5/10 下午 10:06:00

真的很謝謝您的解答!
我修改了css樣式
但不曉得是哪裡沒定義到
可否請版主再幫我挑出毛病嗎?
問這麼簡單的問題實在很不好意思!
才剛開始接觸這塊 希望請你多多指教!!

附上網址:
http://s96.tku.edu.tw/~696730190/submenu_template.html

css檔
http://s96.tku.edu.tw/~696730190/css/submenu.css

function檔
http://s96.tku.edu.tw/~696730190/function/submenu.js

卜維丰   2008/5/10 上午 09:20:00

ccy, 你的問題在於兩處
第一個, 連結部份 loadTab(this),除第一個以外,其他都沒加 this

然後最主要是 CSS 問題, 透過 CSSTab Designer 設計出來的內容, 就像你作的那樣, 不過咧, 這個 CSS 內容要自己再改改, 有 hover 和沒 hover 時的效果, #current 時的效果, #current hover 和沒 hover 時的效果, 你缺了後面這塊

ccy   2008/5/9 下午 08:53:00

您好:
我參考了您的內容做了個網頁
也是用這個軟體產生的範本去做修改
但不知為何無法呈現這篇文章中的效果
(就是作用中網頁有變化, 我想設定是那個選單背景停留在hover的狀態)
而且連結顯示內容也很奇怪
希望您可以幫我解答問題!!
附上網址:
http://s96.tku.edu.tw/~696730190/submenu_template.html

給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: