【卜維丰】分頁設計(2)-控制分頁顯示

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

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

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

引用方法為：

將以下 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');

}

在分頁超連結中，加入上述執式碼，例如：

<li><a href="javascript://" onclick="loadTab(this);"><span>Link 2</span></a></li>

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

下載本範例

卜維丰 12/4 07'

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

粘糕 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

給個回應

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

以下為本站文章分類清單

以下為本站側欄內容

以下為最近發表的文章

以下為本頁本文內容

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

以下為文章回應區