我下载了 jQuery 示例“标签演示”页面。它包括 HTML 文件、3 个 CSS 文件和两个 JS 文件。
当我查看 HTML 文件时，我看到几个对 id(#) 标记的引用（例如 #tab、#tabs-1、#tabs-2 等）但是当我查看时（手动并使用“搜索： ) 在支持 CSS 和 JS 文件中，我看到没有定义 id？我看到很多类 (.) 但没有匹配的 id。
向我解释这是如何工作的？我的目标当然是找到 id #tab 以便我可以操纵它的大小、颜色、字体等。
这是在页面的底部……我相信这是关键。这是用 CLASSES 替换 ID 吗？如果是，为什么？
<script> $( "#tabs" ).tabs(); </script>
【问题讨论】：
<!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 方法，将所有这些额外的类添加到 #tabs div 和其中的所有元素，以便 jquery ui 定义的 css 可以将您的 html 格式化为看起来像演示.
现在你想“剥皮”它。你可以像这样定义你的风格：
#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 是 unqiue，并且可以根据需要使用 class。如果您有通用样式，请使用类选择器。如果它是该元素独有的，那么您可以继续使用 id。
【讨论】：