我选择了带有下面确切标记的 div,我想在这些 div 上方创建一个无序列表,为“选项卡”系统提供基础工作——所有这些都无需修改下面的标记。
<div id="category_1">
<h3 class="maintitle">
<a class="toggle">..</a>
<a href="#">Cat 1 Title</a>
</h3>
<div>
...
</div>
</div>
<div id="category_2">
<h3 class="maintitle">
<a class="toggle">..</a>
<a href="#">Cat 2 Title</a>
</h3>
<div>
...
</div>
</div>
<div id="category_3">
<h3 class="maintitle">
<a class="toggle">..</a>
<a href="#">Cat 3 Title</a>
</h3>
<div>
...
</div>
</div>
如果足够简单,我想用 jQuery 或纯 JS 创建:
<ul>
<li><a href="#" rel="category_1">Cat 1 Title</a></li>
<li><a href="#" rel="category_2">Cat 2 Title</a></li>
<li><a href="#" rel="category_3">Cat 3 Title</a></li>
</ul>
- rel 将是 div 的 ID,因此我知道稍后要显示/隐藏哪些选项卡。
- LI 项的值将是原始代码 H3 内的第二个锚点的文本。
干杯。