jquery ui標籤盲目效果不起作用

我想要得到的效果與jQuery UI版本1.10.2 我的HTML頁面如下所示。這些標籤有效，但盲目效應不會發生。我在做什麼錯？jquery ui標籤盲目效果不起作用

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Tabs</title> 
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.2.custom.css"> 
</head> 
<body> 
<div id="myTabs"> 
    <ul> 
     <li><a href="#a">Tab 1</a></li> 
     <li><a href="#b">Tab 2</a></li> 
    </ul> 
    <div id="a">This is the content panel linked to the first tab, it is shown by default.</div> 
    <div id="b">This is the content panel linked to the second tab, it is shown when its tab is clicked.</div> 
</div> 
<script type="text/javascript" src="development-bundle/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script> 
<script type="text/javascript" src="development-bundle/ui/jquery.ui.widget.js"></script> 
<script type="text/javascript" src="development-bundle/ui/jquery.ui.tabs.js"></script> 
<script type="text/javascript"> 
    (function($) { 
     var tabOpts = { 
      hide: { 
       effect: "blind", 
       duration: 2000 
      }, 
      show: { 
       effect: "blind", 
       duration: 2000 
      } 

     }; 
     $("#myTabs").tabs(tabOpts); 
    })(jQuery); 
</script> 
</body> 
</html>

來源

2013-05-02 Laurence

您的完全相同的代碼在Chrome中適用於我。 [看到這個小提琴]（http://jsfiddle.net/uVQDV/）它是一個特定的瀏覽器給你的問題？ – 2013-05-02 19:23:22

謝謝米格爾的回覆我看到了你的小提琴。以上的html文件在chrome瀏覽器或firefox中都無法正常工作。在我發現的事情上，儘管如果我用調用Google Hosted Libaries調用開發包的4個腳本元素如下所示：和它工作正常。對開發包的調用似乎有些問題。 – Laurence 2013-05-03 18:19:36

原因是因爲您包含了部分jQuery UI版本。

在jQuery UI的標籤，讓顯示/隱藏與blind工作，你必須包括jQuery UI的effects組件http://api.jqueryui.com/category/effects/

見http://api.jqueryui.com/tabs/頁面並閱讀部分依賴

UI效果Core
Widget Factory
效果Core（可選;用於顯示和隱藏選項）

如果包含整個jQuery UI，就像在最後一條評論中一樣，它的工作原理是因爲它包含了所有的庫。

來源

2013-05-04 09:27:19

謝謝愛德華你正確，你已經解決了我的問題。 – Laurence 2013-05-04 16:19:54

@Laurence很樂意幫助你 – 2013-05-04 16:20:20

jquery ui標籤盲目效果不起作用

回答

相關問題