Question

我正在使用JQuery UI呈现标签式布局。我的标记如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/jquery-ui.min.css"/>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/jquery-ui.js" type="text/javascript">
</script>
<script src="js/jquery-ui.min.js" type="text/javascript">
</script>
<script> 
$(function() {
$( "#tabs" ).tabs();
});
</script>  
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" 
 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-
theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<script src="js/jquery-ui.min.js"></script>
<script src="jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script></head>

<body>
<img src="images/logo_big.gif" alt="Logo"/><br/>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Introduction</a></li>
<li><a href="#tabs-2">Family</a></li>
<li><a href="#tabs-3">Wills</a></li>
</ul>
</div>
<div id="#tabs-1">
<h1>Introduction</h1>
</div><!-- Tabs1 -->
<div id="#tabs-2">
<h2>Family Status</h2>
 </div><!-- Tabs2 -->
 </body>
</html>

如何修改上述标记以便正确呈现Jquery UI选项卡？

Answer 1

看起来你正在加载jquery两次，我认为你需要将你的init函数移动到jquery的链接下面，如下所示：

<!doctype html> <html>
    <head>
        <meta charset="utf-8">
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-
    theme.min.css">
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
        <script src="js/jquery-ui.min.js"></script>
        <script src="jquery-ui-1.11.2.custom/external/jquery/jquery.js"></script>
        <script>
            $(function() {
                $("#tabs").tabs();
            });
        </script>
    </head>
    <body>
        <img src="images/logo_big.gif" alt="Logo" />
        <br/>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Introduction</a>
                </li>
                <li><a href="#tabs-2">Family</a>
                </li>
                <li><a href="#tabs-3">Wills</a>
                </li>
            </ul>
        </div>
        <div id="#tabs-1">
             <h1>Introduction</h1>
        </div>
        <!-- Tabs1 -->
        <div id="#tabs-2">
             <h2>Family Status</h2>
        </div>
        <!-- Tabs2 -->
    </body> </html>

JQuery UI选项卡无法在HTML5中呈现

1 个答案: