jQuery UI在选项卡中不起作用

Question

Below is the link of my code which is working fine in Fiddle 下面是我的代码的链接，在Fiddle中工作正常

Fiddle Link : http://jsfiddle.net/JdU8N/ 小提琴链接： http : //jsfiddle.net/JdU8N/

But the same code doesn't work in my local . 但是相同的代码在我的本地无效。 I have properly loaded the jQuery files and have initiated the tabs in $(document).ready(function(){}); 我已经正确加载了jQuery文件，并在$(document).ready(function(){});启动了选项卡$(document).ready(function(){}); . 。 With firebug , i don't get any error too 使用firebug，我也没有任何错误

This is my code : 这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
        <script>
            $(document).ready(function() {
                $('.tabs').tabs();
                $('.subtabs').tabs({
                    activate: function(event, ui) {
                        //get relative li index
                        var secondTabSelected = $(ui.newTab).index();
                        console.log(secondTabSelected);
                    }
                });
            });
        </script>
    </head>

    <body>
        <div class="tabs">
            <ul>
                <li><a href="#tabs-1">Tab 1</a></li>
                <li><a href="#tabs-2">Tab 2</a></li>
            </ul>
            <div id="tabs-1">
                <div class="subtabs">
                    <ul>
                        <li><a href="#tabs-1a">Tab 1-A</a></li>
                        <li><a href="#tabs-1b">Tab 1-B</a></li>
                    </ul>
                    <div id="tabs-1a">
                        <p>Tab 1A</p>
                    </div>
                    <div id="tabs-1b">
                        <p>Tab 1B</p>
                    </div>
                </div>
            </div>
            <div id="tabs-2">
                <div class="subtabs">
                    <ul>
                        <li><a href="#tabs-2a">Tab 2-A</a></li>
                        <li><a href="#tabs-2b">Tab 2-B</a></li>
                    </ul>
                    <div id="tabs-2a">
                        <p>Tab 2A</p>
                    </div>
                    <div id="tabs-2b">
                        <p>Tab 2B</p>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Any help would be appreciated ... 任何帮助，将不胜感激 ...

Answer 1

Your tabs must be getting created but there is no jquery ui stylesheet loaded in your html which is required to give the appearance to the tabs. 必须创建您的标签页，但是html中没有加载jquery ui样式表，这是标签页外观所必需的。

You can download the css with themes from jquery ui website 您可以从jquery ui网站下载带有主题的css

Here is a CDN location for lightness theme. 这是亮度主题的CDN位置。

Here you go a Demo Fiddle with your html markup and css applied to it. 在这里，您将使用HTML标记和CSS进行演示小提琴。

 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css"/>

Here is a SO answer that mentions about jquery UI CDN path for all themes. 这是一个关于所有主题的jquery UI CDN路径的SO答案。

Answer 2

You need to add a jquery-ui.css file. 您需要添加一个jquery-ui.css文件。 It is missing there :) 它在那里不存在:)

You can find links for several themes for ui css here 您可以在此处找到ui css的多个主题的链接

jQuery UI在选项卡中不起作用

问题描述

2 个解决方案

解决方案1
5 2013-06-03 04:55:24

解决方案2
2 2013-06-03 04:56:47

jQuery UI在选项卡中不起作用

问题描述

2 个解决方案

解决方案1 5 2013-06-03 04:55:24

解决方案2 2 2013-06-03 04:56:47

解决方案1
5 2013-06-03 04:55:24

解决方案2
2 2013-06-03 04:56:47