以下為本站文章分類清單

  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'

以下為文章回應區

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

foot pain identifier   2017/7/4 上午 03:54:00

You can certainly see your expertise within the work you write.

The arena hopes for more passionate writers such
as you who are not afraid to mention how they believe. All the time
follow your heart.

foot pain doctor   2017/7/3 上午 09:52:00

Since the admin of this web page is working, no uncertainty very soon it will be famous, due to its quality contents.

   2017/6/24 下午 08:13:00

Precisely what I was searching for, thanks for posting.

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

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