3

我在这里发现了同样的问题jquery ui tabs not working但它对我没有帮助。这是我应该创建选项卡的 HTML，但它不起作用：

 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <title>jQuery UI Tabs</title>
        <link rel="stylesheet" href="jquery.ui.all.css">
    <script src="jquery-1.7.js"></script>
    <script src="jquery.ui.core.js"></script>
    <script src="jquery.ui.widget.js"></script>
    <script src="jquery.ui.tabs.js"></script>

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

<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>Content 1.</p>
</div>
<div id="tabs-2">
    <p>Content 2.</p>
</div>
<div id="tabs-3">
    <p>Content 3.</p>
</div>
</div>

</body>
</html>

这个html的输出是这样的：

     . Nunc tincidunt
     . Proin dolor
     . Aenean lacinia
 Content 1.

 Content 2.

 Content 3.

列表元素应显示为选项卡，但它们显示为列表。为什么呢？提前致谢。

4

8 回答 8

6

很可能您的 jQuery 是在加载 DOM 之前执行的，试试这个：

$(document).ready(function () {

    $("#tabs").tabs();

});
于 2011-11-29T10:23:56.407 回答
4

如果您还没有找到答案，这是由旧的或不匹配的 jQuery/jQuery-ui 版本引起的。更新两者，应该像魅力一样工作！

于 2013-07-22T15:30:43.433 回答
1

尝试使用这些脚本而不是您的脚本（只需替换底线）：

   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
   <script type="text/javascript">
       $(function() {
           $("#tabs").tabs();
       });
   </script>

还将 CSS 文件源更改为这个：

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

我猜你没有很好地指定 jQuery 的 JS 源。希望能帮助到你！

于 2011-11-29T10:41:53.823 回答
0

HTML 是自上而下解析的。tabs您的函数引用了在渲染之前调用的 ID 。

从您的导入中也不清楚您的 JQuery 依赖项都处于同一版本。

这是一个SSCCE：

<!doctype html>
<html lang="en">
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>

  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">1</a></li>
      <li><a href="#tabs-2">2</a></li>
      <li><a href="#tabs-3">3</a></li>
    </ul>
    <div id="tabs-1">
      <p>Text 1</p>
    </div>
    <div id="tabs-2">
      <p>Text 2</p>
    </div>
    <div id="tabs-3">
      <p>Text 3</p>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#tabs" ).tabs();
  } );
  </script>
</body>
</html>

请注意以下事项：

  1. <head>标记中的 JQuery UI 主题。我在这个例子中使用了“base”。

  2. 主 JQuery JS 文件，移动到脚本底部并在 JQuery UI 扩展 JS 文件之前声明。

  3. JQuery UI 扩展 JS 文件，移动到脚本底部并在主 JQuery JS 文件之后声明。

  4. 在以 HTML 创建容器并加载 JQuery JS 依赖项之后，调用容器上的 tabs 函数的 Javascript 块已移动到脚本的位置。

  5. 所有版本号都同意 JQuery 依赖项。

于 2017-02-23T01:51:47.680 回答
-1

确保您没有在页面中两次加载 jquery javascript。如果您多次加载它或加载 2 个不同版本的脚本，则会导致此问题。

于 2013-06-27T14:14:44.747 回答
-1

最佳做法是链接到尽可能靠近正文末尾的脚本。

该脚本在 HTML 加载之前运行，因此当您调用时，页面上还$("#tabs").tabs()没有带有idoftabs的元素。

尝试将脚本移动到页面末尾，看看是否有帮助：

<!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <title>jQuery UI Tabs</title>
</head>
<body>
    <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>Content 1.</p>
       </div>
       <div id="tabs-2">
           <p>Content 2.</p>
       </div>
       <div id="tabs-3">
           <p>Content 3.</p>
       </div>
   </div>
   <script src="jquery-1.7.js"></script>
   <script src="jquery.ui.core.js"></script>
   <script src="jquery.ui.widget.js"></script>
   <script src="jquery.ui.tabs.js"></script> 
   <script>
       $(function() {
           $( "#tabs" ).tabs();
       });
   </script>
</body>
</html>
于 2011-11-29T10:08:01.923 回答
-2

我有同样的问题，这为我解决了：

<a href="#divdata" data-ajax="false">link</a>

于 2015-07-14T20:33:09.857 回答
-3

您忘记调用 jquery-ui 脚本：

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
于 2011-11-29T10:35:07.380 回答