Jquery選項卡不工作，我錯過了什麼？

我試圖使用jquery的標籤，我得到了代碼從網站：http://docs.jquery.com/UI/Tabs和嘗試，看看：Jquery選項卡不工作，我錯過了什麼？

<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>

什麼也沒有發生。我錯過了什麼？

來源

2012-02-16 Ricksher

的jQuery UI的 – Fox32 2012-02-16 18:28:36

@Ricksher的CSS創建你自己的主題 - 如果你覺得任何的答案有幫助你，請接受它。如果你需要爲你的其他問題得到很好的答案 – DG3 2012-02-16 19:01:24

您需要添加jquery ui的css主題。查看here（「基本概述：在網頁上使用jQuery UI」）以獲取詳細信息。把你的頭標記：

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

您可以選擇默認的主題或通過ThemeRoller

來源

2012-02-16 18:30:47 Fox32

如果我想做我自己的CSS？我必須做什麼？用我的顏色等...？ – Ricksher 2012-02-16 18:32:23

看看http://jqueryui.com/themeroller/來創建你自己的主題，或者選擇一個示例主題。 – Fox32 2012-02-16 18:33:18

您缺少樣式表。在您的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 
}

來源

2012-02-16 18:30:13 DG3

如果我想做我自己的CSS，這對你也有幫助嗎？我必須做什麼？用我的顏色等...？ – Ricksher 2012-02-16 18:32:13

如果你想改變標籤的文本顏色，例如，你可以在你的css文件中重寫那個特定的類，並且可以使用！important，以便你的樣式生效。您可以通過在Firebug中檢查它（如果您使用的是Firefox）或Chrome開發人員工具，隨時獲取特定元素的CSS樣式。 – DG3 2012-02-16 18:34:19

或者，不jquery ui有他們的網站上的建設工具？你可以使用它來構建一個jQuery UI兼容的主題來匹配你當前的CSS。 – 2012-02-16 18:37:28

Jquery選項卡不工作，我錯過了什麼？

回答

相關問題