小提琴显示漂亮的简单标签样式，但 CSS 在哪里

Posted 2023-03-22

【中文标题】小提琴显示漂亮的简单标签样式，但 CSS 在哪里

【英文标题】：Fiddle showing nice simple tab style, but where's the CSS

【发布时间】：2015-06-11 21:10:16

【问题描述】：

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

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

但是 -- 设置样式的 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();

【问题讨论】：

那个小提琴使用jQuery UI和它附带的CSS。

检查我的答案..我认为这是您问题的答案...

是的，谢谢，现在就通过它。我想我找到了适用的页面——api.jqueryui.com/tabs——并试图弄清楚如何将其应用于我的问题。

【参考方案1】：

所有的 css 都来自 jQuery，所以如果你真的想要 css，你必须下载 jQuery 文件并了解 jquery 是如何工作的。

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

jQuery 只是提供这个让你使用它，而不是从一开始就自己动手。

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

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

【参考方案2】：

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