jQuery：是否可以從常規列表中創建選項卡？

Question

我是新來jQuery和JS，並試圖找出是否有可能從基本的無序列表中創建簡單的選項卡。我有下面的動態生成的HTML（我不能更改列表標記，但我可以插入按鈕標記）。

我已閱讀的所有標籤教程僅討論使用按鈕和div的無序列表作爲標籤本身。是否有可能以相反的方式使用家長li s的標籤和div s的按鈕？

<div>tab 1</div> 
<div>tab 2</div> 
<div>tab 3</div> 

<ul id="lists"> 
    <li> 
    <h2>Title 1</h2> 
    <ul> 
     <li>An item</li> 
     <li>An item</li> 
     <li>An item</li> 
    </ul> 
    </li> 
    <li> 
    <h2>Title 2</h2> 
    <ul> 
     <li>An item</li> 
     <li>An item</li> 
     <li>An item</li> 
    </ul> 
    </li> 
    <li> 
    <h2>Title 3</h2> 
    <ul> 
     <li>An item</li> 
     <li>An item</li> 
     <li>An item</li> 
    </ul> 
    </li> 
</ul> 

Answer 1

HTML

<div class="tab">tab 1</div> 
<div class="tab">tab 2</div> 
<div class="tab">tab 3</div> 

<ul id="lists"> 
<li> 
    <ul> 
    <li><h2>Title 1</h2></li> 
    <li>An item</li> 
    <li>An item</li> 
    <li>An item</li> 
    </ul> 
</li> 
<li> 
    <ul> 
    <li><h2>Title 2</h2></li> 
    <li>An item</li> 
    <li>An item</li> 
    <li>An item</li> 
    </ul> 
</li> 
<li> 
    <ul> 
    <li><h2>Title 3</h2></li> 
    <li>An item</li> 
    <li>An item</li> 
    <li>An item</li> 
    </ul> 
</li> 
</ul> 

CSS

.tab { 
    display: inline-block; 
} 

#lists { 
    margin: none; 
    padding: none; 
} 

#lists > li { 
    list-style: none; 
    margin: none; 
    padding: none; 
    display: none; 
} 

的Javascript（jQuery的）

var tabs = $('#lists>li'); 

$('.tab').click(function (e) { 
    e.preventDefault(); 
    var current_tab = tabs.eq($(this).index()).show(); 
    tabs.not(current_tab).hide(); 
});