搜尋

熱門關鍵字:

最新文章

  1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. [JS]模組化頁籤切換

[JS]模組化頁籤切換

2008/12/19

　　最近花了些許的時間，將現有的幾個部落格匯整起來，蓋了一個小型的入口首頁，在製作的同時才發現，看似容易的頁籤切換，其裡面卻暗藏了許多的玄機，同時也在網路上找到不少關於頁籤的範例與模組，但始終都有同一個通病，就是載入都要秏費不少的時間去作判斷的動作，再將要顯示的區塊給秀出來，因此為了能讓整個網頁跑起來更順暢速度更快，便開始著作自製頁籤的切換，在這邊也要感謝男丁格爾的相挺，也讓梅干桑處女秀頁籤跟大家來相見。

　　此範例最大的特色則是，有別於一般範例或模組在載入時需先作判斷後，再將要顯示的區塊的秀出，而此範例則是一開始就將要顯示的區塊就直接寫在html 網頁中，因此當網頁讀取時，一讀到就能立即反應，不用再去呼叫function來作判斷，加快顯示的速度，那現在就跟各位一同來分享此範例。

Step1
＜head＞….＜/head＞之間
#style

<link href=“//photo.minwt.com/file/sampleView/javascript/mmTag/tag.css” rel=“stylesheet” type=“text/css” />
#javascript

<script language=“javascript” src=“//photo.minwt.com/file/sampleView/javascript/mmTag/tag.js”></script>
Step2
＜body＞….＜/body＞之間
#html

<div id=“searchItem” class=“searchItem”>
<ul>
　 <li class=“onSearch”>
　　<a onclick=“SearchTag(‘searchItem’,‘searchCont’,‘0’);”>
　　
<span>網頁</span></a></li>
　 <li ><a onclick=“SearchTag(‘searchItem’,‘searchCont’,‘1’);”>
　　<span>教學</span></a></li>
　 <li ><a onclick=“SearchTag(‘searchItem’,‘searchCont’,‘2’);”>
　　<span>工具</span></a></li>
</ul>
</div>
<div id=“searchCont” class=“searchCont”>
<ul>
　 <li>網頁內容 </li><!–-0-–>
　 <li style=“display:none;”>教學內容</li><!–-1 -–>
　 <li style=“display:none;”>工具內容</li><!–-2 -–>
</ul>
</div>
※重點提示：

Step1.中將要顯示的頁籤<li>加上class=”onSearch”
Step2.將不顯示的<li>加入style=”display:none;”SearchTag(‘xxx’,’xxx’,’x’)中分別有三個”其三個值分別為：其1指的為選單id，其2為顯示內容id，其3為內容中的<li>排序
[範例預覽] [範例下載]


Javascript, tag, 頁籤,