Fiddle 显示了漂亮的简单标签样式,但是 CSS 在哪里

Fiddle showing nice simple tab style, but where's the CSS

我很喜欢this fiddle example of a two-tier tab menu

如您所见,这是一个非常干净且易于理解的布局。

但是 -- 设置样式的 CSS 在哪里?

当我 copy/paste 完全相同的 html 和 js 进入一个空白 fiddle 页面时,我得到了我期望的不包括任何 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();

它在边栏的外部资源部分有链接。

所有 css 都来自 jQuery,所以如果您真的想要 css,您必须下载 jQuery 文件并了解 jquery 的工作原理在那上面。

不推荐。没有理由这样做。

jQuery只是提供这个让你使用它而不是你自己从头开始。

您可以从这里下载 jquery: https://jquery.com/download/

这里有一些文档以及如何使用它 API: http://api.jquery.com/