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标签盲目效果不起作用

回答

相关问题