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/
我很喜欢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/