为什么jQuery ui选项卡不起作用？

我在这里找到同样的问题jquery ui tabs not working但它没有帮助我。这是我的HTML应该创建的标签，但它不工作：为什么jQuery ui选项卡不起作用？

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

和这个网站的输出是这样的：

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

Content 2. 

Content 3.

列表元素应显示为标签，但它们显示的列表。为什么？提前致谢。

来源

2011-11-29 Piscean

你的JS文件加载正确？你可以在$（“#tabs”）.tabs（）;之前放置一个console.log语句。确保LOC正在运行？ – Ger

我做到了。我在$（“#tabs”）.tabs（）;之前和之后放置了警报。和它的工作 – Piscean

是你的jQuery UI css的路径是否正确？ – j08691

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

来源

2013-07-22 15:30:43 pfrank

-1

这是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>

来源

2011-11-29 10:08:01 danwellman

没有帮助:(。 – Piscean

你在控制台中得到任何错误？ – danwellman

失踪jquery.ui.base.css但它并没有任何区别。一旦我添加了所有的CSS，它并没有帮助，它应该显示标签至少。造型是不同的。是不是？ – Piscean

最有可能的DOM加载之前你jQuery是执行，试试这个：

$(document).ready(function() { 

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

});

来源

2011-11-29 10:23:56 Dormouse

我尝试过这个问题，以及没有帮助 – Piscean

$（函数（）{}）是速记$（文件）。就绪（函数（）{}） – danwellman

你好，你每天都会学到新的东西！ – Dormouse

-3

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

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

来源

2011-11-29 10:35:07

你觉得''和它后面的两个脚本是什么？ – j08691

试着用这些脚本代替你（只是把底部l INES）：

<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" />

我猜你没有指定井JS来源为jQuery的。希望能帮助到你！

来源

2011-11-29 10:41:53

nops。没有帮助 – Piscean

-1

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

来源

2013-06-27 14:14:44 user2528458

-2

我有同样的问题，这解决了这个问题对我来说：

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

来源

2015-07-14 20:33:09

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文件后声明。
调用容器上的制表符函数的Javascript块已经被移动到在HTML中创建容器之后的脚本中，并且在加载了JQuery JS依赖关系之后。
所有版本号达成一致JQuery的依赖关系。

来源

2017-02-23 01:51:47 8bitjunkie

为什么jQuery ui选项卡不起作用？

回答

相关问题