为什么 jQuery ui 选项卡不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8308868/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why jQuery ui tabs are not working?
提问by Piscean
I found the same question here jquery ui tabs not workingbut it didn't help me. This is my HTML which should create the tabs but it's not working:
我在这里发现了同样的问题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>
and output of this html is this:
这个 html 的输出是这样的：
. Nunc tincidunt
. Proin dolor
. Aenean lacinia
Content 1.
Content 2.
Content 3.
list elements should be displayed as tabs but they displaying as list. Why is that so? Thanks in advance.
列表元素应显示为选项卡，但它们显示为列表。为什么呢？提前致谢。
回答by Dormouse
Most likely your jQuery is executing before the DOM is loaded, try this:
很可能你的 jQuery 在 DOM 加载之前执行，试试这个：
$(document).ready(function () {
$("#tabs").tabs();
});
回答by pfrank
If you haven't found an answer, this is caused by either old or mismatched jQuery/jQuery-ui versions. Update both and should work like a charm!
如果您还没有找到答案，这是由旧的或不匹配的 jQuery/jQuery-ui 版本引起的。更新两者，应该像魅力一样工作！
回答by Mário Rodrigues
Try to use these scripts instead of yours (just replace the bottom lines):
尝试使用这些脚本而不是您的脚本（只需替换底线）：
<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>
Also change the CSS file source to this one:
还将 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" />
I'm guessing you are not specifying well the JS Source for jQuery's. Hope it helps!
我猜你没有很好地指定 jQuery 的 JS 源。希望能帮助到你！
回答by 8bitjunkie
HTML is parsed top-down. Your function refers to an ID called tabsbefore it is rendered.
HTML 是自上而下解析的。您的函数引用了tabs在呈现之前调用的 ID 。
It is also not clear from your imports that your JQuery dependencies are all at the same version.
从您的导入中也不清楚您的 JQuery 依赖项都在同一版本中。
Here is a SSCCE:
这是一个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>
Note the following:
请注意以下事项：
The JQuery UI theme in the
<head>tag. I have used "base" for this example.The main JQuery JS file, moved to the bottom of the script and declared before the JQuery UI extension JS file.
The JQuery UI extension JS file, moved to the bottom of the script and declared after the main JQuery JS file.
The block of Javascript which calls the tabs function on the container has been moved to a position the script after the container has been created in HTML and after the JQuery JS dependencies have been loaded.
All version numbers agree for the JQuery dependencies.
<head>标签中的 JQuery UI 主题。我在这个例子中使用了“base”。主 JQuery JS 文件，移至脚本底部并在 JQuery UI 扩展 JS 文件之前声明。
JQuery UI 扩展 JS 文件，移到脚本底部并在主 JQuery JS 文件之后声明。
在 HTML 中创建容器并加载 JQuery JS 依赖项之后，调用容器上的 tabs 函数的 Javascript 块已移动到脚本的位置。
所有版本号都适用于 JQuery 依赖项。
回答by user2528458
Make completely sure that you are not loading the jquery javascript twice in your page. If you are loading it more than once or loading 2 different versions of the script, it will cause this problem.
完全确保您没有在页面中两次加载 jquery javascript。如果您多次加载它或加载 2 个不同版本的脚本，则会导致此问题。
回答by danwellman
It is best practiceto link to the scripts as close to the end of the body as possible.
这是最好的做法，以链接到脚本尽量靠近身体尽可能的结束。
The script is running before the HTML has loaded, so when you call $("#tabs").tabs()there is no element with an idof tabson the page yet.
该脚本在 HTML 加载之前运行，因此当您调用时，页面上还$("#tabs").tabs()没有带有idof 的元素tabs。
Try moving the scripts to the end of the page and see if that helps:
尝试将脚本移动到页面的末尾，看看是否有帮助：
<!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>
回答by Chase Ernst
I had this same problem, and this solved it for me:
我遇到了同样的问题，这为我解决了：
<a href="#divdata" data-ajax="false">link</a>
<a href="#divdata" data-ajax="false">link</a>
回答by Nicolas-Verley
Your forgot to call jquery-ui script :
你忘了调用 jquery-ui 脚本：
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
