0

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

根据开发人员的博客，我只需要更改 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>
4

3 回答 3

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 jQueryUI script

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

这就是您实施jQueryUI's Tabs.

JAVASCRIPT：

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

这就是全部！（容易吧？）

HTML：

如果您想从其他页面加载内容，您需要做的就是将链接添加到<a>'s 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>内<div id="tab_container" class="module_bg">
  • 给创建<div>的 ID（“tab1”）。
  • 将 ID 放在<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非常灵活，所以它应该适合您的需求！我希望这会有所帮助，如果您有任何问题，请告诉我！

有用的网址：

于 2013-04-19T20:12:44.493 回答
1

虽然我可能会为此使用 Jquery-UI Tabs，但这里是如何使用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>
于 2013-04-22T16:36:08.720 回答
1

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

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

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

于 2013-06-07T09:46:01.860 回答