Question

我正在尝试使用jquery ui版本1.10.2来使用效果我的html页面如下所示。选项卡有效但盲目效果不会发生。我做错了什么？

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

Answer 1

原因是因为您要包含部分jQuery UI版本。

在jQuery UI选项卡中，为了让显示/隐藏效果blind有效，您必须包含jQuery UI effects组件http://api.jqueryui.com/category/effects/

请参阅页面http://api.jqueryui.com/tabs/并阅读依赖关系

部分

UI核心
小工具厂效果核心（可选;用于显示和隐藏选项）

如果您包含整个jQuery UI，就像在上一条评论中一样，它可以工作，因为它包含所有库。

jquery ui tabs盲目效果不起作用

1 个答案: