Javascript jQuery mobile/ui简单导入_Javascript_Jquery_Html_Jquery Mobile

Javascript jQuery mobile/ui简单导入

javascript jquery html jquery-mobile

Javascript jQuery mobile/ui简单导入,javascript,jquery,html,jquery-mobile,Javascript,Jquery,Html,Jquery Mobile,我以前从未使用过jquerymobile——很难使用这个简单的选项卡式示例问题：选项卡不显示-它们只显示为div和li 有人能指出我的错误吗？可能很简单我导入了jqueryui、mobile和jQuery（普通）。所以我想我已经把一切都记下来了。移动和UI扩展了普通的jQuery，对吗？但是试着按照这里的指示去做：我甚至都做不到有什么建议吗 <head> <link rel="stylesheet" href="http://code.jquery.com/mobile

我以前从未使用过jquerymobile——很难使用这个简单的选项卡式示例

问题：选项卡不显示-它们只显示为div和li

有人能指出我的错误吗？可能很简单

我导入了jqueryui、mobile和jQuery（普通）。所以我想我已经把一切都记下来了。移动和UI扩展了普通的jQuery，对吗？但是试着按照这里的指示去做：我甚至都做不到

有什么建议吗

<head>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<script>
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>

</head>

<body>
<div data-role="page">

    <div data-role="header" data-theme="a">
        <h1>My App</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Hello world</p>  

        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Nunc tincidunt</a></li>
                <li><a href="#tabs-2">Proin dolor</a></li>
                <li><a href="#tabs-3">Aenean lacinia</a></li>
            </ul>

            <div id="tabs-1">
                <p>Tab #1</p>
            </div>

            <div id="tabs-2">
                <p>Tab #2</p>
            </div>

            <div id="tabs-3">
                <p>Tab #3</p>
            </div>
        </div>  
    </div><!-- /content -->

</div><!-- /page -->
</body>

</html>


$（函数（）{
$（“#制表符”）.tabs（）；
});
我的应用程序
你好，世界





表1
表2
表3

您没有为选项卡包含必要的javascripts和css。请更改

标题

标记，如下所示：

<head>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
<script src="http://jqueryui.com/ui/jquery.ui.tabs.js"></script>
<script>
    $(function() {
        $( "#tabs" ).tabs();
    });
</script>

</head>


$（函数（）{
$（“#制表符”）.tabs（）；
});