更好的格式來開發一個垂直標籤插件？

我試圖用jQuery開發垂直製表符插件，只是爲了學習。我遇到了幾個例子，其中一個是jQuery自己的插件和一個插件。他們使用無序列表和div元素實現選項卡。在這種情況下，儘管我沒有看到爲什麼會出現這種情況，但是javascript無法正常工作或未啓用，它們看起來像一堆列表項，隨後是隨機無關的內容。更好的格式來開發一個垂直標籤插件？

由於我剛學，我憑直覺做這個簡單的加價：

<ul id="vTabs"> 
    <li id="tabs"> 
     <div id="tab_1">Show 1</div> 
      <div id="tab_2">Show 2</div> 
    </li> 
    <li id="content"> 
     <div id="content_1">this is data div 1</div> 
     <div id="content_2">this is data div 2</div> 
    </li> 
</ul>

可能有人請引導我告訴如果這是壞還是好還是不錯的？我可以繼續這個動手嗎？

來源

2011-02-08 hkansal

你能告訴我們你的豎直突出的意思。這些標籤是否垂直運行（一個在另一個下面），內容出現在側面，還是水平運行（每個在一行中彼此相鄰），內容出現在下面？附：不要使用數字ID，請使用如下所示：id =「C1」... not id =「1」... – Neil 2011-02-08 22:14:01

此外，ID必須是唯一的。您的頁面上不能有兩個或更多個具有相同ID的元素。 – Neil 2011-02-08 22:22:11

請原諒我錯誤的_id_值。加價僅供參考。這裏強調內容結構。通過_vertical_選項卡，我的意思是您的第一個定義，垂直運行的標籤和除此之外的內容。 – hkansal 2011-02-08 22:32:04

頁面中永遠不應該有2個元素具有相同的ID，就像在結構中一樣。

有沒有原因，你沒有與你已經找到的東西？選項卡作爲使用id屬性鏈接到div元素的列表項？像這樣的東西是相當靈活的：

<ul class="tabs"> 
    <li><a href="#panel_1">Tab 1</a></li> 
    <li><a href="#panel_2">Tab 2</a></li> 
    <li><a href="#panel_3">Tab 3</a></li> 
</ul> 
<div class="panels"> 
    <div id="panel_1" class="panel">Foo</div> 
    <div id="panel_2" class="panel">Bar</div> 
    <div id="panel_3" class="panel">Hi</div> 
</div>

來源

2011-02-08 22:09:36 simshaun

我的理解是，你這樣做是爲了學習jQuery的練習。

在最簡單的過程，遵循的是：

使用Simshaun建議的HTML佈局你會漂浮的「面板」 DIV（與所有的個人「面板中的」隱藏層）到「選項卡右側「UL並在」A「選項卡上設置」點擊「處理程序，以激活所選」面板「DIV的寬度。

一旦你有了工作，你可以使它看起來更漂亮，通過更好地用CSS來設計它。

問候尼爾

來源

2011-02-08 22:34:24 Neil

更好的格式來開發一個垂直標籤插件？

回答

相關問題