Ajax选项卡设置在localhost(EasyTabs)上不起作用 [英] Ajax tabs setup not working on localhost (EasyTabs)
问题描述
我将 EasyTabs 用于我的标签.我使用ajax-tabs，以便可以从其他页面获取内容(当我单击导航菜单的相应按钮时).但这是行不通的.内容未加载.
I'm using EasyTabs for my tabs. I use ajax-tabs so I can fetch content from other pages (when I click on the appropriate buttons of the navigation menu). But it does not work. The content gets not loaded.
According to the developer's blog I just had to change the order of my divs and add the data-target attribute. But it doesn't work and I don't know where the problem might be. The strange thing is when I don't use Ajax it works (but I need Ajax so I can load the content when I click on a navigation button).
我在MAMP上的localhost:8888上使用 Easytabs .出于测试目的，我使用的是Safari 5.1.7.
I use Easytabs on localhost:8888 with MAMP. For testing purposes I am using Safari 5.1.7.
在这里，我初始化 Easytabs .
<script type="text/javascript">
$(document).ready(function(){ $('#tab_container').easytabs(); });
</script>
这是我的按钮和div的设置.
This is the setup for my buttons and divs.
<div id="tab_container" class="module_bg">
<ul id="shadetabs">
<li><a href="'<?php echo $setting['site_url'];?>/includes/homepage/new_games.inc.php'" data-target="#t1"><?php echo NEWEST_MODULE;?></a></li>
<li><a href="'<?php echo $setting['site_url'];?>/includes/homepage/popular_games.inc.php'" data-target="#t2"><?php echo POPULAR_MODULE;?></a></li>
</ul>
<div class="panel_container">
<div id="t1">
</div>
<div id="t2">
</div>
</div>
</div>
推荐答案
我对 EasyTabs 是它的错误，所以我建议使用 jQueryUI's Tabs ( API ).
如果您不熟悉 jQueryUI ，则可以通过将其添加到您的<head>.
示例:
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head>
只需确保添加 jQuery script 之前 jQueryUI script (否则您会得到一个错误).
Just make sure to add the jQuery script BEFORE the jQueryUI script (or else you will get an error).
注意:我在示例中使用的版本可能已过时，因此请确保同时包含两个 jQueryUI .
NOTE: The version I used in my example may be out of date, so make sure you are including the most up-to-date version of both jQuery and jQueryUI.
这是实现jQueryUI's Tabs的方式.
JAVASCRIPT:
$(function(){
$('#tab_container').tabs();
});
这就是全部！ (容易吗?)
HTML:
如果要从其他页面加载内容，只需要做的是将链接添加到<a>的href，而jQueryUI Tabs负责其余部分.
If you want to load content from other pages, all you need to do is add the link to the <a>'s href and jQueryUI Tabs takes care of the rest.
<div id="tab_container" class="module_bg">
<ul id="shadetabs">
<li><a href="http://fiddle.jshell.net/dirtyd77/kC2Wn/1/show/">Link 1</a></li>
<li><a href="http://fiddle.jshell.net/dirtyd77/kC2Wn/2/show/">Link 2</a></li>
</ul>
</div>
演示: http://jsfiddle.net/dirtyd77/kC2Wn/5/
但是，如果内容位于同一页面上，则:
If, however, the content is located on the same page, then:
- 在
<div id="tab_container" class="module_bg">中创建一个 - 给创建的
<div>一个ID("tab1" ). - 将ID放入
<a>的href中.
<div>
- Create a
<div>within<div id="tab_container" class="module_bg"> - Give the created
<div>an ID ("tab1"). - Put the ID in the
<a>'s href.
这是HTML:
<div id="tab_container" class="module_bg">
<ul id="shadetabs">
<li><a href="http://fiddle.jshell.net/dirtyd77/kC2Wn/1/show/">Link 1</a></li>
<li><a href="http://fiddle.jshell.net/dirtyd77/kC2Wn/2/show/">Link 2</a></li>
<li><a href="#tab1">Link 3</a></li>
</ul>
<div id="tab1">
I AM A TAB!
</div>
</div>
演示: http://jsfiddle.net/dirtyd77/kC2Wn/6/
jQueryUI's Tabs非常灵活，因此应满足您的需求！希望对您有所帮助，如果您有任何疑问，请通知我！
jQueryUI's Tabs is very flexible so it should suit your needs! I hope this helps and let me know if you have any questions!
有用的链接:
- http://jquery.com (jQuery网站)
- http://jqueryui.com (jQueryUI网站)
- 是否有链接到最新"的使用Google API上的jQuery库?(最新链接到jQuery库)
- https://stackoverflow.com/questions/1348559/are-there -hosted-jquery-ui-themes-wherewhere (jQuery css主题)
- http://jqueryui.com/themeroller/(Themeroller-创建您自己的主题)
- http://jquery.com (jQuery Site)
- http://jqueryui.com (jQueryUI Site)
- Is there a link to the "latest" jQuery library on Google APIs? (Latest link to jQuery library)
- https://stackoverflow.com/questions/1348559/are-there-hosted-jquery-ui-themes-anywhere (jQuery css themes)
- http://jqueryui.com/themeroller/ (Themeroller - create your own themes)
这篇关于Ajax选项卡设置在localhost(EasyTabs)上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
