为啥 jQuery ui 选项卡不起作用？

Posted 2023-05-09

技术标签:

【中文标题】为啥 jQuery ui 选项卡不起作用？【英文标题】：Why jQuery ui tabs are not working?为什么 jQuery ui 选项卡不起作用？ 【发布时间】：2012-01-08 16:20:35 【问题描述】：

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

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

【问题讨论】：

你的js文件加载正确吗？你能在 $( "#tabs" ).tabs(); 之前放一个 console.log 语句吗？以确保 LOC 正在运行？我做到了。我在 $( "#tabs" ).tabs(); 之前和之后放置警报及其工作你的 jQuery UI css 的路径是否正确？你有什么解决办法吗？我也面临同样的问题 【参考方案1】：

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

$(document).ready(function () 

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

);

【讨论】：

$(function() ) 是 $(document).ready(function () ) 的简写【参考方案2】：

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

【讨论】：

【参考方案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 源。希望对您有所帮助！

【讨论】：

【参考方案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 依赖项。

【讨论】：

【参考方案5】：

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

【讨论】：

【参考方案6】：

best practice 链接到尽可能靠近正文末尾的脚本。

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

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

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

【讨论】：

缺少 jquery.ui.base.css 但它没有任何区别。一旦我添加了所有的CSS。它没有帮助。它应该至少显示标签。造型是不同的。不是吗？是的，它应该仍然可以在没有任何样式的情况下工作。查看在 Firebug 或类似内容中呈现的 HTML，选项卡容器中的元素应该获取类名，如“ui-widget-content”和其他以“ui”为前缀的类名 - 是这样吗？还可以尝试从链接中删除 href 并从 div 中删除 id（外部 div 除外） - 选项卡小部件应该为您添加这些。【参考方案7】：

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

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

【讨论】：

【参考方案8】：

你忘记调用 jquery-ui 脚本了：

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

【讨论】：

<script src="jquery.ui.core.js"></script> 和后面的两个脚本你怎么看？

以上是关于为啥 jQuery ui 选项卡不起作用？的主要内容，如果未能解决你的问题，请参考以下文章

使用UI-Bootstrap 0.11.0，角度js中的活动选项卡不起作用

动态生成时引导选项卡不起作用

在 UITabcontroller 中转到 3 选项卡不起作用

PyQt5，将文本添加到选项卡不起作用

当我失去焦点时选项卡不起作用

首次单击后引导程序 4 显示选项卡不起作用