Javascript, 網頁設計

[JS]模組化頁籤切換

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

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


Step1
<head>….</head>之間
#style

<link href="http://ds.minwt.com.tw/file/sampleView/javascript/mmTag/tag.css" rel="stylesheet" type="text/css" />

#javascript

<script language="javascript" src="https://ds.minwt.com.tw/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>排序

[範例預覽] [範例下載]


UAG軍規iPhone防摔殼