以下為本站文章分類清單

  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'

以下為文章回應區

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

foot pain diabetes   2017/7/3 下午 09:33:00

Hello, Neat post. There's a problem along with your website in web
explorer, would check this? IE still is the market leader and a huge element
of people will leave out your magnificent writing due to this problem.

foot pain identifier   2017/6/21 下午 07:34:00

These are in fact great ideas in about blogging.
You have touched some nice points here. Any
way keep up wrinting.

louveniapetrina.myblog.de   2017/6/12 下午 02:24:00

I just like the valuable info you supply in your
articles. I'll bookmark your blog and check once more here regularly.
I'm slightly sure I'll learn many new stuff right here! Best of luck for the next!

http://illegalenigma6096.snack.ws/   2017/6/12 下午 02:09:00

That is really fascinating, You're an excessively professional blogger.
I've joined your rss feed and look forward to seeking more of your great post.

Additionally, I've shared your web site in my social networks

obeisantammonia91.hazblog.com   2017/6/11 上午 05:31:00

Wonderful, what a web site it is! This blog gives valuable information to us, keep it up.

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時,您的範例會變成什麼樣子?

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