我真的很喜欢这个两层选项卡菜单的小提琴示例。
如您所见,这是一个干净且易于理解的布局。
但是——样式化它的 CSS 在哪里?
当我将完全相同的 html 和 js 复制/粘贴到一个空白的小提琴页面中时,我得到了我所期望的不包括任何 CSS 的东西——一个看起来非常可怕的结果。
我已经尝试过所有 Fiddle 选项,但找不到任何类似于样式表的东西来绘制漂亮的菜单。
有人有什么想法吗?HTML和JS如下。
<div id="tabs">
<ul>
<li><a href="#tabs-1">First tab</a></li>
<li><a href="#tabs-2">Second tab</a></li>
</ul>
<div id="tabs-1">
<p>
<div id="tabs1">
<ul>
<li><a href="#tabs-11">First nested 1</a></li>
<li><a href="#tabs-12">Second nested 1</a></li>
</ul>
<div id="tabs-11">
<p>Content for first nested tab 1</p>
</div>
<div id="tabs-12">
<p>Content for second nested tab 2</p>
</div>
</div>
</p>
</div>
<div id="tabs-2">
<p>
<div id="tabs2">
<ul>
<li><a href="#tabs-21">First nested tab 2</a></li>
<li><a href="#tabs-22">Second nested tab 2</a></li>
</ul>
<div id="tabs-21">
<p>Content of first nested tab 2</p>
</div>
<div id="tabs-22">
<p>Content of second nested tab 2</p>
</div>
</div>
</p>
</div>
这是js:
$('#tabs').tabs();
$('#tabs1').tabs();
$('#tabs2').tabs();