JQuery 和 CSS 选项卡常规见解

Question

我下载了 jQuery 示例 "tab demo" 页面。它包括 HTML 个文件、3 个 CSS 个文件和两个 JS 文件。

当我查看 HTML 文件时，我看到了多个对 id(#) 标签的引用（例如 #tab、#tabs-1、#tabs-2 等），但是当我查看 (手动并在支持 CSS 和 JS 文件中使用“搜索:)，我看到没有定义任何 ID？我看到很多类 (.) 但没有匹配的 ID。

给我解释一下这是怎么回事？我的目标当然是找到 id #tab，这样我就可以操纵它的大小、颜色、字体等。

这在页面底部……我相信这是关键。这是用 CLASSES 替换 ID 吗？如果是，为什么？

<script> $( "#tabs" ).tabs(); </script>

Answer 1

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>tabs demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<style>
.tabs_addition{
    min-height:500px;
}
</style>
</head>
<body>

<div id="tabs" class="tabs_addition">
  <ul>
    <li><a href="#fragment-1"><span>One</span></a></li>
    <li><a href="#fragment-2"><span>Two</span></a></li>
    <li><a href="#fragment-3"><span>Three</span></a></li>
  </ul>
  <div id="fragment-1">
    <p>First tab is active by default:</p>
    <pre><code>$( "#tabs" ).tabs(); </code></pre>
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>

<script>
$( "#tabs" ).tabs();
</script>

</body>
</html>

所以这是 html 页面的源代码。 js 代码所做的是调用 jquery ui 中定义的 tabs 方法，将所有这些额外的 classes 添加到 #tabs div 及其中的所有元素，以便 css 由 jquery 定义 ui 可以将您的 html 格式化为看起来像演示。

现在你要"skin"了。你可以像这样定义你的风格：

#fragment-1 {background-color: #ff9900; font-size: 20px; color: #ffff00;}
#fragment-2 {background-color: #333333; font-size: 22px; color: #ff5555;}
#fragment-3 {background-color: green; font-size: 12px; color: #ffffff;}

至于不使用 id 来设置样式，我认为这并不重要。请记住，id 是唯一的，class 可以随心所欲地使用。如果您有常见的样式，请使用 class 选择器。如果它是该元素唯一的，那么您可以继续使用 id。

JQuery 和 CSS 选项卡常规见解

JQuery and CSS Tab General Insight

jquery

css

jquery-ui