推薦：Ajax標簽導航實例詳解-Javascript技巧篇
Javascript技巧篇（arguments對象的運用技巧） 好了，我們現在已經把CSS樣式寫好了，現在就開始用腳本來控制了。通過剛才講解標簽樣式的時候，其實我們也基本把腳本控制的邏輯流程分析了下： 選中當前標簽的背景要區別顯示； 選中標簽和其前一個標簽的分隔線

CSS技巧篇（position屬性的運用技巧）

下面開始我們的分析了，先來看看這段XHTML代碼：

<ul class="tabs" id="news">
<li class="first" id="news-0"><a href="news/news0.htm">網站重構</a><span></span></li>
<li id="news-1"><a href="news/news1.htm">CSS布局實錄</a><span></span></li>
<li id="news-2"><a href="news/news2.htm">海嘯的地盤</a><span></span></li>
<li id="news-3"><a href="news/news3.htm">Ajax高級編程</a><span></span></li>
</ul>
<div class="clearfix cnt" id="newsCnt">
<img src="img/girl-1.jpg" alt="林志琳" />
<ul>
<li><a href="#">PRG全棉短袖襯衣最后的搶購機搶購機</a> 2006-08-15</li>
<li><a href="#">PRG全棉短袖襯衣最后的搶購機搶購機</a> 2006-08-15</li>
<li><a href="#">PRG全棉短袖襯衣最后的搶購機搶購機</a> 2006-08-15</li>
<li><a href="#">PRG全棉短袖襯衣最后的搶購機搶購機</a> 2006-08-15</li>
<li><a href="#">PRG全棉短袖襯衣最后的搶購機搶購機</a> 2006-08-15</li>
<li><a href="#">PRG全棉短袖襯衣最后的搶購機搶購機</a> 2006-08-15</li>
</ul>
</div>

id="news" - news就是我們的導航標簽的ID；
id="newsCnt" - newsCnt就是我們要寫入信息的目標DOM節點；
class="first" - first當前(第一個)標簽的樣式；
id="news-0" - news-0 通過”-“分開，我們就分別可以得到news(導航標簽ID)，0（標簽[li]在導航標簽中的索引值）
<a href="news/news0.htm">網站重構</a> - 超鏈接
<span></span> - 標簽間的分割線

我羅列的這些東西，相信大家開始看出了些頭緒了，呵呵，不過別急！在我們看處理的腳本之前，先讓我們來看看導航標簽的樣式，主要是看看我們對分割線的處理(一點CSS處理的技巧)。

/* 導航標簽的樣式 */
.tabs li{
float:left;
display:inline;
text-align:center;
width:120px;
height:12px;
padding:4px 0 6px 0;
overflow:hidden;
letter-spacing:1px;
position:relative;
}

/* 標簽分割線的樣式 */
.tabs li span{
position:absolute;
right:0;
top:3px;
width:2px;
height:16px;
overflow:hidden;
font-size:1px;
background-image:url(../img/tab_sline.gif);
}

技巧就是.tab li中的”position:relative;“和.tabs li span中”position:absolute;“結合使用的技巧（呵呵，其實我也是看了YAHOO的標簽后才這么用的）。現在我們就來了解下position屬性吧（CSS講座開始，不過是好東西哦，呵呵�。�：

position：絕對定位，指本體對上級的定位（本人理解的說法），有3個可選值static（靜態定位-默認值）、relative（絕對相對定位）、absolute（絕對定位）。

relative：他是參照父級的原始點為原始點，無父級則以BODY的原始點為原始點，配合top、right、bottom、left進行定位，當父級內有padding等CSS屬性時，當前級的原始點則參照父級內容區的原始點進行定位。如下圖一：

absolute：他的意思是絕對定位，他是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位，在沒有設定TRBL，默認依據父級的做標原始點為原始點。如果設定TRBL并且父級沒有設定position屬性，那么當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定。如下圖二：

不知道你看出些其他的什么特性出來了沒有？我們仔細看下圖二，你發現沒有，在用absolute定位的時候，它可以覆蓋在與其相鄰的節點上（不是因為它設置了z-index屬性），而是它的一個特性--不占布局或者說不影響鄰居節點的布局。而relative則不一樣，它會影響鄰居節點的布局。我們通過圖一還看不出來，來看圖三：

大家注意到圖片中的灰色部分沒有？這個就是我要說的，這塊灰色的部分的大小就是#relative的大小，這個說明了什么？表明它會影響鄰居節點的布局，而且鄰居節點接下來的位置就是#relative使用一般margin定位的末端。講詳細點，就是說雖然#relative顯示的在屏幕的位置是紅色塊的地方，但是實際仍然要占據它起始位置所在的布局（它的寬和高）的大小。這里#relative的起點是body，那么它站的布局就是從body起點開始width:250px;height:250px;（加padding:5px）的布局（大小），也就是我們看到圖中灰色部分。呵呵，好繞是嗎？仔細看看，多用下就明白了。

好了，現在就我們ajax標簽導航中使用的是relative+absolute的結合，當一個absolute的節點包含在一個relative的節點中時，它的”原始點“就是relative節點了，而不是“參照瀏覽器的左上角-body”了，而它又不影響其鄰居節點的布局，所以它就不會影響<li></li>中間文字（文本節點）的布局了（這里li的空間夠大）。這樣以來，就得到了我們標簽中，每個標簽后有一個分隔線的樣式了。如圖四：

OK，我們對position屬性和它的值的使用搞清楚了。接下來就來看看是怎么來更改當前選中標簽（li）的樣式吧:

.tabs li{
float:left;
display:inline;
text-align:center;
width:120px;
height:12px;
padding:4px 0 6px 0;
overflow:hidden;
letter-spacing:1px;
position:relative;
}

/* 第一項被選中的樣式 */
.tabs li.first{
background-image:url(../img/tab_active1.gif);
}

/* 其他項被選中的樣式 */
.tabs li.current{
background-image:url(../img/tab_active2.gif);
}

/* 被選中項的字體樣式 */
.tabs li.current,
.tabs li.first{
font-weight:bold;
}

/* 被選中項的鏈接顏色樣式 */
.tabs li.current a,
.tabs li.first a{
color:#D45417;
}

.tabs li span{
position:absolute;
right:0;
top:3px;
width:2px;
height:16px;
overflow:hidden;
font-size:1px;
background-image:url(../img/tab_sline.gif);
}

/* 選中項和選中項前一項的樣式 */
.tabs li.first span,
.tabs li.current span,
.tabs li.off span{/* 選中項前一項 */
display:none;
}

這里要簡單說的就是樣式表CSS繼承（層疊）的順序，一定要是先寫標簽(li)標簽默認（背景）樣式再寫選中時的（背景）樣式，然后是默認分隔線（span）-> 選中時 -> 失去焦點時這樣一個順序。至于CSS的繼承順序的具體只是，大家可以google一下。

分享：實例解析Ajax標簽導航-DOM技巧篇
DOM技巧篇（DOM基礎知識） 講到這里，我們就要了解一下DOM的一些基礎知識了。 DOM（Document Object Model 文檔對象模型）是HTML和XML的應用程序接口（API）。DOM將把整個頁面規劃成有節點層級構成的文檔。HTML或XML頁面的每一個部分都是一個節點的衍生物。