Ajax 选项卡设置在本地主机上不起作用（EasyTabs）答案

【问题标题】：Ajax tabs setup not working on localhost (EasyTabs)Ajax 选项卡设置在本地主机上不起作用（EasyTabs）
【发布时间】：2013-04-17 19:25:17
【问题描述】：

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

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

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

这里我初始化Easytabs。

<script type="text/javascript"> 
  $(document).ready(function(){ $('#tab_container').easytabs(); });
</script>

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

<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 似乎有很多问题。为什么不使用jQuery UI's Tabs，它甚至提供了一个方便的ajax 教程？
确保提供jQuery script，然后提供jQueryUI script。 jQueryUI 包含标签。如果你需要一个 css 文件，那么check this 或者你总是可以create your own。
没问题！另请参阅：htmlgoodies.com/beyond/javascript/…。但是，所使用的脚本已过时，因此请务必使用最新版本的 JQUERY 和 JQUERYUI！但这只是向您展示了如果您不熟悉如何实现它。我也会写一个更详细的答案。
本地 AJAX 请求在 WebKit 浏览器上可能会失败。 Firefox 默认允许本地 AJAX 请求，您是否尝试在 Firefox 上加载它？
会发生什么？任何请求、请求错误、JavaScript 错误？

标签： javascript jquery css ajax tabs

【解决方案1】：

我最初对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 添加到BEFORE jQueryUI script（否则会出现错误）。

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

这就是你实现jQueryUI's Tabs的方式。

JAVASCRIPT：

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

就是这样！ （简单吧？）

HTML：

如果您想从其他页面加载内容，您只需将链接添加到<a> 的href，然后jQueryUI Tabs 负责其余的工作。

<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/

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

在<div id="tab_container" class="module_bg"> 内创建一个<div>
为创建的<div> 提供一个 ID ("tab1")。
把ID放在<a>的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 非常灵活，应该可以满足您的需求！希望对您有所帮助，如果您有任何问题，请告诉我！

有用的链接：

http://jquery.com（jQuery 网站）
http://jqueryui.com（jQueryUI 网站）
Is there a link to the "latest" jQuery library on Google APIs?（jQuery 库的最新链接）
https://stackoverflow.com/questions/1348559/are-there-hosted-jquery-ui-themes-anywhere（jQuery css 主题）
http://jqueryui.com/themeroller/（Themeroller - 创建您自己的主题）

【讨论】：

才发现是我自己的错！我试图加载一个不包含足够信息（即包含、要求等）的 php 文件！将其更改为正确的文件，现在它可以工作了！:)

【解决方案2】：

虽然我可能会为此使用 Jquery-UI 选项卡，但以下是如何使用 Ajax Easy Tabs Plugin。

jsFiddle

确保包含必要的外部资源。

<script src="/javascripts/jquery.js" type="text/javascript"></script>
<script src="/javascripts/jquery.hashchange.js" type="text/javascript"></script>
<script src="/javascripts/jquery.easytabs.js" type="text/javascript"></script>

和

改变这个 -

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

到这里-

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

并将您的 HTML 更改为类似的内容-

    <div id="ajax-tab-container" class='tab-container'>
    <ul class='tabs'>
        <li class='tab'><a href="<!-- url of page 1 -->" data-target="#tabs-ajax-1">Page 1</a>

        </li>
        <li class='tab'><a href="<!-- url of page 2 -->" data-target="#tabs-ajax-2">Page 2</a>

        </li>
    </ul>
    <div class='panel-container'>
        <div id="tabs-ajax-1"></div>
        <div id="tabs-ajax-2"></div>
    </div>
</div>

【讨论】：

我记得我已经这样做了，但没有成功。这就是我在这里发布这个问题的原因！
我的错！！！我发现我试图从一个不包含足够信息（包括、require_once 等）的 php 文件中加载内容。改变了所有必要的东西，现在它可以工作了！我真是个白痴！

【解决方案3】：

虽然最初的发帖人已经解决了他的问题，但我来到这里的症状相同，但原因不同。

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

就 jQueryUI 选项卡而言，这个小部件有许多限制，EasyTabs 提供了简洁明了的解决方案（例如将导航区域与内容区域分开，或使用 UL 和 LI 之外的元素），因此您可能不会通过切换更好。此外，我没有目睹此处其他答案中报告的 EasyTabs 的任何错误，但诚然，文档很薄弱。

【讨论】：

非常感谢您提供的重要信息。:) 我已经解决了这个问题，它就像 EasyTabs 的魅力一样。问题是我忘记通过.htaccess 授予对适当文件的访问权限。允许从 127.0.0.1 访问后，一切正常！我真是个笨蛋……