ajax标签设置 – 不在localhost上工作（easytabs）

我正在使用EasyTabs作为我的标签。 我使用ajax-tabs，这样我就可以从其他页面获取内容（当我点击导航菜单的相应按钮时）。 但它不起作用。 内容未加载。

根据开发人员的博客，我只需要更改div的顺序并添加data-target属性。 但它不起作用，我不知道问题可能在哪里。 奇怪的是，当我不使用Ajax时，它可以工作（但我需要Ajax，所以当我点击导航按钮时我可以加载内容）。

我在localhost上使用Easytabs ：8888和MAMP。 出于测试目的，我使用的是Safari 5.1.7。

如果有人可以帮助我，那就太好了。 我非常感谢能得到的任何帮助，所以我可以解决这个问题。 有什么帮助吗？

我在这里初始化Easytabs 。

 $(document).ready(function(){ $('#tab_container').easytabs(); });  

这是我的按钮和div的设置。

 
 
 
<a href="https://stackoverflow.com/questions/16068506/ajax-tabs-setup-not-working-on-localhost-easytabs/'/includes/homepage/new_games.inc.php'" data-target="#t1">
 
<a href="https://stackoverflow.com/questions/16068506/ajax-tabs-setup-not-working-on-localhost-easytabs/'/includes/homepage/popular_games.inc.php'" data-target="#t2">
 
 
 
 
 
 
 
  

Answer 1

我最初对EasyTabs是它EasyTabs错误，所以我建议使用jQueryUI's Tabs （ API ）。

如果您不熟悉jQueryUI ，可以将它添加到 ，将其包含在项目中。

例：

只需确保在jQueryUI script jQuery script 之前添加jQuery script （否则您将收到错误）。

注意：我在我的示例中使用的版本可能已过期，因此请确保您包含jQuery和jQueryUI的最新版本。

---

这是你实现jQueryUI's Tabs 。

JAVASCRIPT：

 $(function(){ $('#tab_container').tabs(); }); 

这就是全部！ （对吗？）

HTML：

如果你想从其他页面加载内容，你需要做的只是添加的href的链接， jQueryUI Tabs负责其余的工作。

 
 
 
Link 1
 
Link 2
 
  

演示： http ： //jsfiddle.net/dirtyd77/kC2Wn/5/

但是，如果内容位于同一页面上，则：

• 在

  创建

• 为创建的

  一个ID（ “tab1” ）。

• 将ID放在的href中。

这是HTML：

 
 
 
Link 1
 
Link 2
 
Link 3
 
 
 I AM A TAB! 
  

演示： http ： //jsfiddle.net/dirtyd77/kC2Wn/6/

jQueryUI's Tabs非常灵活，所以它应该适合您的需求！ 我希望这有帮助，如果您有任何疑问，请告诉我！

---

有用的url：

• http://jquery.com （jQuery网站）
• http://jqueryui.com （jQueryUI网站）
• 是否有链接到Google API上的“最新”jQuery库？ （jQuery库的最新链接）
• https://stackoverflow.com/questions/1348559/are-there-hosted-jquery-ui-themes-anywhere(jQuery css themes）
• http://jqueryui.com/themeroller/（Themeroller – 创建自己的主题）

Answer 2

虽然我可能会使用Jquery-UI Tabs，但这里是如何使用Ajax Easy Tabs插件 。

的jsfiddle

务必包含必要的外部资源。

和

改变这个 –

 $(document).ready(function(){ $('#tab_container').easytabs(); }); 

对此 –

 $(document).ready(function(){ $('#ajax-tab-container').easytabs(); }); 

并将您的HTML更改为以下内容 –

  
 
 
Page 1 
 
Page 2 
 
 
 
 
 
  

Answer 3

虽然原始海报已经解决了他的问题，但我来到这里的症状相同，但原因不同。

使用Chrome通过本地文件系统查看页面时，也可以看到AJAX不能与EasyTabs一起使用的问题。 根据设计，Chrome不允许使用AJAX方法加载本地文件。 如果您遇到此问题，请检查Firefox和IE是否产生相同的问题，如果没有，那么您可能希望使用小型网络服务器通过127.0.0.1将文件提供给浏览器作为解决方法。

至于考虑jQueryUI选项卡，这个小部件有许多限制，EasyTabs提供了简洁明了的解决方案（例如将导航区域与内容区域分开，或者使用UL和LI之外的元素），这样你就不会有更好的选择了。交换。 此外，我没有亲眼目睹过EasyTabs在其他答案中报告的任何问题，但是文档很薄弱。