Question

我正在使用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>

Answer 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和{{3}的最新版本}}

这是您实施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>

样本： jQueryUI

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

在<div>

<div id="tab_container" class="module_bg">

为创建的<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/5/

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

有用的链接：

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

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

Answer 3

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

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

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

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

3 个答案: