Question

我下载了jQuery示例＆＃34; tab demo＆＃34;页。它包括HTML文件，3个CSS文件和两个JS文件。

当我查看HTML文件时，我看到几个对id（＃）标签的引用（例如＃tab，＃tabs-1，＃tabs-2等）但是当我看时（手动并使用＆＃34） ;搜索:)在支持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方法，将所有这些额外的类添加到#tabs div及其中的所有元素，以便jquery ui定义的css可以将html格式化为类似于demo

现在你想要“皮肤”它。你可以像这样定义你的风格：

#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，并且可以在您想要的时间使用类。如果您有共同的样式，那么使用类选择器。如果它对这个元素是唯一的，那么你可以继续使用id。

JQuery和CSS Tab General Insight

1 个答案: