你可以有圖像作爲背景或jQuery的任何其他格式的標籤。每當我看到僅顯示這樣簡單的白色標籤例如:你可以格式jQuery的標籤
http://yensdesign.com/tutorials/tabs/
我試圖看看我是否能與jQuery選項卡代替當前的JPG圖像映射(此頁http://www.salemgolfclub.org/上):
你可以有圖像作爲背景或jQuery的任何其他格式的標籤。每當我看到僅顯示這樣簡單的白色標籤例如:你可以格式jQuery的標籤
http://yensdesign.com/tutorials/tabs/
我試圖看看我是否能與jQuery選項卡代替當前的JPG圖像映射(此頁http://www.salemgolfclub.org/上):
每個選項卡只是一個HTML li
元素,因此您應該可以修改其樣式表屬性,以使其看起來像您想要的那樣。
下面是標籤相關的HTML:
<ul class="menu">
<li id="news" class="">News</li>
<li id="tutorials" class="">Tutorials</li>
<li id="links" class="active">Links</li>
</ul>
選項卡的外觀與CSS完全控制。具有「有效」類的任何li
元素在具有「菜單」類的任何ul
元素內具有特定的外觀。同樣,li
沒有類名稱的元素的樣式不同。
當單擊每個li
元素時,頁面上隱藏的div
元素將顯示在選項卡下方的區域中。這由jQuery選項卡擴展控制,它向菜單ul
中的所有li
元素添加單擊事件。爲了充分利用這個選項卡擴展,您需要有一個div
元素,它在加載時與頁面上已有的單個選項卡相對應。
這意味着您需要擁有頁面上的所有頁面(家庭,課程簡介,專業商店,記分卡,郊遊&活動,會員,路線和聯繫我們)的所有內容,其中I會強烈建議不要,因爲您試圖將這個標籤想法塑造到的頁面數量。相反,我會修改選項卡擴展程序以在單擊選項卡時加載頁面,而不是預加載的頁面元素。
您可以輕鬆地做到這一點。最快捷的方法是將相關的css行從默認樣式表中拉出來,並修改它們以滿足您的需求。您也可以從頭開始,但需要大量的css格式才能使選項卡正常工作,因此有一個好的起點。
感謝您的意見。 。任何建議或點擊標籤時加載頁面的例子。 。 – leora 2009-08-08 04:31:05