ajax标签设置 - 不工作在localhost（easytabs） [英] ajax tabs setup - not working on localhost (easytabs)
问题描述
我为我的标签使用 EasyTabs 。我使用ajax选项卡，所以我可以从其他页面获取内容（当我点击导航菜单的相应的按钮）。但它不工作。
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.
根据开发人员的 blog 我只需要改变div的顺序并添加data-target属性。但它不工作，我不知道问题可能在哪里。奇怪的是，当我不使用Ajax它的工作原理（但我需要Ajax所以我可以加载内容，当我点击导航按钮）。
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).
我使用在localhost：8888上使用MAMP Easytabs 。为了测试的目的，我使用Safari 5.1.7。
I use Easytabs on localhost:8888 with MAMP. For testing purposes I am using Safari 5.1.7.
如果有人能帮助我，这将是巨大的。我非常感谢任何帮助，我可以得到所以我可以解决这个问题。
It would be great if someone could help me out. I highly appreciate any help I can get so I can solve this problem. Any help, please?
这里我初始化 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 是因为它是相当多的bug，所以我建议使用 jQueryUI的标签 （ 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 a href =https://developers.google.com/speed/libraries/devguide#jqueryui =nofollow> jQueryUI script （或者
Just make sure to add the jQuery script BEFORE the jQueryUI script (or else you will get an error).
注意：我在示例中使用的版本可能已过期，因此请确保您包含 jQuery 的最新版本，以及< a href =http://jqueryui.com/ =nofollow> 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的Tabs 。
JAVASCRIPT ：
JAVASCRIPT:
$(function(){
$('#tab_container').tabs();
});
这就是全部！ （easy right？）
HTML ：
如果你想从其他页面加载内容，你所需要做的就是将链接添加到< a> 的href和 jQueryUI
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>
DEMO：
http://jsfiddle.net/dirtyd77/kC2Wn/5/
但是，如果内容位于同一页面上，则：
If, however, the content is located on the same page, then:
- 创建
< div>< div id =tab_containerclass =module_bg> - 将ID插入
< a> ;的href。
- 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>
DEMO：
http://jsfiddle.net/dirtyd77/kC2Wn/6/
jQueryUI的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 Site）
- http://jqueryui.com （jQueryUI网站）
- 是否有链接到最新 jQuery库（最新的jQuery库连结）
- 在任何地方都有托管的jQuery UI主题（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)
- Are there hosted jQuery UI themes anywhere? (jQuery css themes)
- http://jqueryui.com/themeroller/ (Themeroller - create your own themes)
这篇关于ajax标签设置 - 不工作在localhost（easytabs）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
