以下為本站文章分類清單

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

以下為本頁本文內容

分頁設計(3)-完整功能

分頁設計中,第一篇文件(分頁設計(1)-CSS組成)說明了如何使用 CSS 樣式進行分頁設計,第二篇文件(分頁設計(2)-控制分頁顯示)中提到了如何使用 Javascript 來變更分頁顯示,本篇,分頁設計的最終篇,就來個大結局,先看例子:

Link 1 內容,可以包含所有 HTML 標籤,甚至可以放置 IFRAME

第一篇文件(分頁設計(1)-CSS組成)中,說明了 CSS 的使用及內容套用方式,其中分頁的真正內容,是放在 ID 為 tabsC 的區塊中,在本例,tabsC 區塊裡,再細分為 S1 - S5 總共 5 個區塊,每個區塊中,都放置了相對應的內容,例如:

<div id="tabsC">
      <div id="S1" style="display:inline;">Link 1 內容...</div>
      <div id="S2" style="display:none;">Link 2 內容...</div>
      <div id="S3" style="display:none;">Link 3 內容...</div>
      <div id="S4" style="display:none;">Link 4 內容...</div>
      <div id="S5" style="display:none;">Link 5 內容...</div>
</div>

這時,改寫一下第二篇文件(分頁設計(2)-控制分頁顯示)裡的 loadTab() 程式,如下(藍字為異動部份):

function loadTab(obj,n){

var layer;
eval('layer=\'S'+n+'\'');

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

//變更分頁標題樣式
obj.parentNode.setAttribute('id','current');
document.getElementById(layer).style.display='inline';

}

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

就這麼簡單完成了!

由於,分頁內容中可以加上內置頁框(<IFRAME>),所以,IFRMAE 本身載入的內容,可以設成自動更新,也可以在分頁超連結中,再加指定,如:

<li><a href="news.asp" target="S2" onclick="loadTab(this,2);"><span>Link 2</span></a></li>

如此一來,也能完成隨時更新的效果,不是保持不換頁,又要能局部更新,都非得要用 AJAX 不可!

惱人的虛線

進行到這裡,還不是令人太滿意,看看這張圖:

tab看到 Link 1 這個分頁標籤四周的虛線沒?很討厭厚?沒關係,加個小程式即可,名為 clearLinkDot()

function clearLinkDot() {
   var i, a, main;
   for(i=0; (a = document.getElementsByTagName("a")[i]); i++) {
      if(     a.getAttribute("onFocus")==null) {
         a.setAttribute("onFocus","this.blur();");
      }else{
         a.setAttribute("onFocus",a.getAttribute("onFocus")+";this.blur();");
       }
      a.setAttribute("hideFocus","hidefocus");
   }
}

頁面載入時,加上這段程式即可,如:

<body onload="clearLinkDot();">

如此一來,惱人的虛線就消失了

下載本範例

卜維丰 12/5 07'

以下為文章回應區

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

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

It's an remarkable article in favor of all the online
people; they will get advantage from it I am sure.

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

Hello there! Would you mind if I share your blog with my twitter group?
There's a lot of people that I think would really enjoy your content.
Please let me know. Many thanks

city   2010/11/1 下午 09:51:00

謝謝網主, 已解決問題=]

卜維丰   2010/10/20 下午 11:11:00

city, 打包的範例裡, 背景圖沒這麼寬

city   2010/10/17 下午 03:37:00

你好網主~
想問問分頁那個heading 的字 (即是你例子中的link1, link2...link5)
如果字太長, 怎麼背景會沒了色呢?
還有如果背景轉了色發覺會多了兩條線
請問該怎樣修改呢??

這是圖: http://img813.imageshack.us/img813/7374/picf.png

謝!

卜維丰   2010/8/25 下午 12:20:00

回 Karen,

這種作法,就很難讓你一個頁面裡兩份啦,原因就是你遇到的問題

解決之道,用別的方法寫,我有寫,改日再公佈

Karen   2010/8/16 下午 12:49:00

老師您好,想請問一下:
如果我要再同一頁作兩個以上分頁該怎麼修改js呢?
id只能出現一次
我把一樣的js複製改名後就不能用了

先謝謝老師!

gary   2010/5/10 上午 11:32:00

謝謝老師!!

jimjim   2010/4/29 下午 11:20:00

如同一網頁上用上兩個分頁設計的話要怎樣做呢?? 如yahoo般。我發覺兩個以上就不行了!! 謝謝!!

_james   2010/4/21 上午 10:32:00

請問版主是否有"重新認識javascript"戡誤版面?發現2-79頁的 Table 2.9.4.3程式的第五行,判斷式程式碼書上寫成了html codes

婉婷   2010/4/12 下午 06:45:00

老師你好:
我想請教老師的這種分頁設計,他如何才能在同一個網頁上顯示兩組分頁,目前我可以顯示兩組在同一個網頁上,但只能做到第2組正常,第一組會沒反應,實在不知道應該如何修改才能改善,才請教老師,盼老師指導一下~還需要改哪裡~謝謝

婉婷   2010/4/12 下午 06:44:00

老師你好:
我想請教老師的這種分頁設計,他如何才能在同一個網頁上顯示兩組分頁,目前我可以顯示兩組在同一個網頁上,但只能做到第2組正常,第一組會沒反應,實在不知道應該如何修改才能改善,才請教老師,盼老師指導一下~還需要改哪裡~謝謝

GINNY   2010/3/7 下午 06:03:00

又多學習一個東西 棒!謝謝...


小碟   2010/2/8 下午 03:40:00

老師你好:
想請教你一個問題,我很喜歡你這個分頁效果,可是...我是用Dreamweaver看,也都習慣看Dreamweaver的分割功能,第一個分頁小妹改沒問題,可是到了第2個分頁後要加入語法就頭痛了,因為分割功能看不到.若是選擇程式碼就...<希望老師能懂我意思>
想請教有沒有什麼方法或是軟體,讓小妹比較容易在第2頁之後,寫程式碼容易的方法

路人甲   2010/1/29 上午 04:14:00

不錯 雖然這分頁要這麼多字 但學習了一個東西 棒!
再接再勵!

cynthia   2009/11/26 下午 04:18:00

請問,若我寫一個li的選單,要讓選單裏的所有連結都指向div的網頁,我要怎麼做才好?

也就是說
a link 要連到另一個div(這只用.html寫成的div)
b link
c link

您的範例都將五個連結寫在同一個網頁,如果我這四個都要分別存成各別的網頁,要如何辦到?

因為若五個連裏都有相同的選項,將來我要改網頁,不是要將五個檔都叫出來改,可以只做一個父頁,呼叫子頁,將來要改只改子頁就好.

Grace   2009/11/19 上午 10:34:00

您好,
如果要透過超連結的方式,指定連結到Link2,要怎麼做呢

Abby   2009/11/17 下午 10:14:00

如果我有多個分頁...如何讓其它網頁中設定的超連結...連到自己要的分頁中...連結要如何設定呢?有辦法嗎?

Bonnie_K   2009/9/22 下午 06:11:00

正好需要,非常感謝

joe   2009/6/8 下午 11:47:00

板大你好
我想要再分頁裡面在加一個分頁,在li那我是連到另一隻A.PHP,我在那隻A.PHP裡有做分頁,但是在原本的分頁中假如我點了A.PHP裡的分頁後,他會整頁都跳到我所點的那一頁。

在分頁裡面有辦法再做一個分頁嗎?
謝謝

阿釣   2009/2/10 下午 01:28:00

老師 請問如果我要把選單功能置中 應該從CSS語法中何區修改?

卜維丰   2008/10/11 下午 01:18:00

DJ黑鬼, 可以

例如本頁,一進頁面 tab 是不是在第一個?因為第一個 li 加上了 id="current"

再仔細一點說,這個例子,如果你要換頁在別的頁面使用,改變不同 li 加上 id="current" 就可以,至於怎麼作?最常見的作法是加上字串,例如:
tab2.asp?current=......

你想想看,還有需要再來留話,前陣子忙,沒空回,抱歉

DJ黑鬼   2008/10/5 下午 02:50:00

我在我的網頁用了分頁功能,跳到B分頁時候裡面有連結資料庫的檔案,對這些檔案用重複區域並進行下一頁的功能,現在可以下一頁資料也會下一頁更新,但是分頁會一直跳到上一個頁面...必須要點回B分頁..也辦法在B分頁進行內容的下一頁時候保持在B分業不要跳回A分頁嗎?謝謝~

龍騎士   2008/8/4 下午 10:37:00

版主你好
關於先前所問的問題
在下已經有所解答了
也相當謝謝你的回覆
而在下的主問題是:
讓底下顯示內容的區塊與上排Link1+Link2+Link3+Link4+Link5的長度同寬
而關於這點在下在次想了之後
因為是css的原故
所以要修改其寬度自然也是修改其內文那區的css長度即可
不知在下這樣想有沒有錯~不過在下試出來應該可行
在次感謝版主回覆

卜維丰   2008/8/3 下午 12:08:00

龍騎士,

你的問題,我不是很明白
我這麼理解:你想讓底下顯示內容的區塊,保持一樣大小(尤其是寬度)? 這樣對嗎?

如果是,基本條件是你自己要注意放置在內容區塊中的資料,影像,多媒體和表格是不會自動換行,就有可能撐寬區塊

否則,你就加上overflow:hidden,把超出的範圍隱藏起來也可以

龍騎士   2008/8/2 下午 12:23:00

版主你好
因為想做個網頁~而剛好需此功能
故在網路上找到了這邊~覺得很實用
不過在下有個問題
就是關於底下內容顯示的那一排div要如何設定其長度與Link1-Link5的長度同寬呢?
在下目前剛接觸css,在一些地方尚未成熟
還請版主多多賜教~謝謝!

卜維丰   2008/7/15 下午 05:14:00

jacky, 連結要有個對應視窗

目前這個分頁, 用的是 div 製作
所以如果你想把資料寫在 div 裡, 要嘛用 ajax , 要嘛在這個範例架構下, 分頁裡放 iframe (不過,這應該不是你要的)

jacky   2008/7/15 下午 02:16:00

請問以下如果我在
link1 或 link3
有一個超連結
它會跑出一個視窗
如: 如果我想在link1 有一個超連結到aaa.html
那要如果讓aaa.html顯示在里面不要跑出新視窗

卜維丰   2008/4/30 上午 11:41:00

zideaddin, 首先這不是 Java, 是 JavaScript
再來, 由於涉及 id 命名, 最好你作兩份

zideaddin   2008/4/27 下午 07:43:00

請問,若一個頁面要放兩區這種分頁java
宣告要怎改呢?

秋風   2008/2/22 下午 12:36:00

請問如果我想mouse移向LINK X 時,面會自動轉互,請問可否加上幾句便成功?
又如何完成呢?

好像yahoo.com.hk 首頁的新聞/財經/娛樂等...

謝謝

卜維丰   2007/12/18 下午 01:48:00

網頁製作發展這麼多年,逐漸分出不同喜好,當那些稱表格邪惡的人,也大量採用 DIV,CSS 禪意花園、各式佈落格,那一個不是採用 DIV 來進行設計?那些堅持不用 DIV,考慮向下相容的派流,是不是又該稱為表格偏執狂?
如果您想指正我的範例親和力不夠,我欣然接受,畢竟我也從來沒有打算滿足所有的人。
用 AJAX 設計的話,門檻更高,我在書裡也有範例,但不是 AJAX 技術問世,就什麼動作都要拉向那裡吧?XML 處理空白、特殊符號的問題也不是三語兩言就能說完的事情,我用某一個方向和角度,把一個可用的範例提出來和各位分享,如果我是抄抄貼貼的磚塊文章,那我非常歡迎各位的批評,但看得出來這是您個人的好惡與偏執,抑或憂心於網路美化教育、親和教育、相容教育等議題,而有感而發,我無權阻止,欣然接受但不認同。
我也有好朋友打死不用 Javascript,既然您提到 AJAX,又希望我把 Javascript 移除,這之間的相互矛盾,我就不知您該如何自圓其說了。
至於我的能力,我會不斷加強,畢竟天外有天,人外有人

afu   2007/12/18 上午 12:24:00

您的能力令人質疑,這樣的範例親和力未免也太差了,Div偏執狂用於此篇範例再貼切不過,寫過Ajax書籍的您怎沒有考慮到優雅降級呢?您有試過當沒有Javascript時,您的範例會變成什麼樣子?

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