Question

我在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.

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

Answer 1

很有可能你的jQuery在加载DOM之前正在执行，试试这个：

$(document).ready(function () {

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

});

Answer 2

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

Answer 3

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

   <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 Source。希望它有所帮助！

Answer 4

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>

请注意以下事项：

<head>标记中的JQuery UI主题。我在这个例子中使用了“base”。
主要的JQuery JS文件，移到脚本底部并在JQuery UI扩展JS文件之前声明。
JQuery UI扩展JS文件，移到脚本底部并在主JQuery JS文件之后声明。
在HTML中创建容器之后以及加载JQuery JS依赖项之后，调用容器上的tabs函数的Javascript块已移动到脚本的位置。
所有版本号都同意JQuery依赖项。

Answer 5

将best practice链接到尽可能靠近身体末端的脚本。

脚本在加载HTML之前就已经运行，因此当您致电$("#tabs").tabs()时，页面上没有id tabs的元素。

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

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

Answer 6

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

Answer 7

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

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

Answer 8

你忘了打电话给jquery-ui脚本：

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

为什么jQuery ui标签不起作用？

8 个答案: