Javascript jQuery 标签不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9022897/
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
jQuery tabs not working
提问by Encryption
I'm trying to implement jQuery tabs to replace AJAX tab container. I've followed the code from the jquery websitebut my tabs aren't showing up. It just loads the entire page full of data with no tabs. And firebug tells me the following error:
我正在尝试实现 jQuery 选项卡来替换 AJAX 选项卡容器。我遵循了jquery 网站上的代码，但我的选项卡没有显示出来。它只是加载充满数据的整个页面而没有选项卡。firebug 告诉我以下错误：
$("#tabs").tabs is not a function
$("#tabs").tabs is not a function
$("#tabs").tabs();
$("#tabs").tabs();
I've got references to all the files needed:
我有对所有需要的文件的引用：
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
And I've got the function specified as follows:
我有指定的功能如下：
<script type="text/javascript">
$(document).ready(function() {
$("#tabs").tabs();
});
</script>
The code for the tabs are as follows:
选项卡的代码如下：
div id="tabs">
<ul>
<li><a href="#tab-1"><span>Patient Information</span></a></li>
<li><a href="#tab-2"><span>Medical History 1 of 3</span></a></li>
<li><a href="#tab-3"><span>Medical History 2 of 3</span></a></li>
<li><a href="#tab-4"><span>Medical History 3 of 3</span></a></li>
<li><a href="#tab-5"><span>Scheduler</span></a></li>
<li><a href="#tab-6"><span>Care Plan</span></a></li>
</ul>
<div id="tab-1">
</div>
**Repeats for all tabs through tab-6**
</div>
Can anyone tell me what I'm doing wrong? Since the .tabs() function isn't working the page is just loading like so -
谁能告诉我我做错了什么？由于 .tabs() 函数不起作用，页面只是像这样加载 -
采纳答案by Zoltan Toth
Your code works just fine. The only thing you're missing is the CSS for the tabs - http://jsfiddle.net/8JX4A/
你的代码工作得很好。您唯一缺少的是选项卡的 CSS - http://jsfiddle.net/8JX4A/
回答by Rasatan
If you have another jQuery element in the same page maybe you have conflicts. I have the same problem, try with this:
如果您在同一页面中有另一个 jQuery 元素，则可能存在冲突。我有同样的问题，试试这个：
<script type="text/javascript">
jQuery.noConflict();
$(document).ready(function() {
$("#tabs").tabs();
});
Then only change i:; jQuery.noConflict();before each jQuery element.
然后只i:; jQuery.noConflict();在每个 jQuery 元素之前更改。
回答by Steve Wellens
You need to link the CSS file: http://jsfiddle.net/fJaBa/
您需要链接 CSS 文件：http: //jsfiddle.net/fJaBa/
回答by Ajeet Sinha
Try loading scripts in this sequence
尝试按此顺序加载脚本
<script src="../../jquery-1.7.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.tabs.js"></script>
回答by Sanjay Patel
$.fn.tabs = function() {
var selector = this;
this.each(function() {
var obj = $(this);
$(obj.attr('href')).hide();
$(obj).click(function() {
$(selector).removeClass('active');
$(selector).each(function(i, element) {
$($(element).attr('href')).hide();
});
$(this).addClass('active');
$($(this).attr('href')).fadeIn();
return false;
});
});
$(this).show();
$(this).first().click();
};
回答by coletrain
Not a jquery expert but I do know you will need some css to make the tabs work correctly. since they will need to be positioned relative. Also check out this jquery tabs tutorialto compare your code.
不是 jquery 专家，但我知道您需要一些 css 才能使选项卡正常工作。因为它们需要相对定位。另请查看此jquery 选项卡教程以比较您的代码。
回答by kprobst
Is the 1.8alias to the jQuery UI lib working? Have you tried using a specific full version, like 1.8.16instead? Can you look at the page once it's loaded and see if jQuery and/or jQuery UI were actually pulled in successfully?
1.8jQuery UI 库的别名是否有效？您是否尝试过使用特定的完整版本1.8.16？你能在页面加载后查看页面，看看 jQuery 和/或 jQuery UI 是否真的被成功拉入了吗？
