Question

我正在尝试使用jquery选项卡，我从网站获取代码：http://docs.jquery.com/UI/Tabs并尝试一下，看看：

<html>
<head>
  <script type="text/javascript" src="jquery-1.5.1.js"></script>
  <script type="text/javascript" src="jquery-ui-1.8.11.min.js"></script>
  <script type="text/javascript">
      $(document).ready(function () {
          $("#tabs").tabs();
      });
  </script>
</head>
<body style="font-size:62.5%;">

<div id="tabs">
    <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>$('#example').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>
</body>
</html>

什么都没发生。我错过了什么？

Answer 1

您缺少样式表。在您的javascript文件之前添加<link href="http://code.jquery.com/ui/1.8.11/themes/base/jquery-ui.css" rel="stylesheet">

如果要覆盖样式，可以执行以下操作。例如，如果要更改活动选项卡的文本颜色，我会看到通过chrome开发人员工具使用了以下类。所以我可以在我的css中覆盖这些类

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
            color: red !important
}

Answer 2

你需要添加jquery ui的css主题。查看here（“基本概述：在网页上使用jQuery UI”）了解详细信息。把它放在你的头标记中：

<link type="text/css" href="css/themename/jquery-ui-1.8.17.custom.css" rel="Stylesheet" />

您可以选择默认主题或通过ThemeRoller

创建自己的主题

Jquery选项卡不起作用，我缺少什么？

2 个答案: