Ajax tabs setup not working on localhost (EasyTabs)

问题

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.

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).

I use Easytabs on localhost:8888 with MAMP. For testing purposes I am using Safari 5.1.7.

Here I initialize Easytabs.

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

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>

回答1:

My initial thought about EasyTabs was that it was rather buggy, so I suggest using jQueryUI's Tabs (API).

If you are unfamiliar with jQueryUI, you can include it in your project by adding it to your <head>.

EXAMPLE:

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

Just make sure to add the jQuery script BEFORE the jQueryUI script (or else you will get an error).

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.

This is how you implement jQueryUI's Tabs.

JAVASCRIPT:

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

That's all there is! (easy right?)

HTML:

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:

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.

Here is the 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's Tabs is very flexible so it should suit your needs! I hope this helps and let me know if you have any questions!

HELPFUL LINKS:

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)
https://stackoverflow.com/questions/1348559/are-there-hosted-jquery-ui-themes-anywhere (jQuery css themes)
http://jqueryui.com/themeroller/ (Themeroller - create your own themes)

回答2:

While I would probably use Jquery-UI Tabs for this, Here's how to use the Ajax Easy Tabs Plugin.

jsFiddle

Be sure to include the necessary external resources.

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

And

Change this -

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

To this -

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

and change your HTML to something like this-

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

回答3:

While the original poster already solved his issue, I came here having the same symptoms but for a different reason.

The issue of AJAX not working with EasyTabs can also be seen when using Chrome to view a page via the local file system. Chrome, by design, does not allow the loading of local files using the AJAX methods. If you encounter this issue, check to see if Firefox and IE produce the same problem, and if not, then you will probably want to use a small webserver to serve up the files to your browser via 127.0.0.1 as a workaround.

As far as considering jQueryUI tabs, there are many limitations for this widget which EasyTabs provides clean and simple solutions for (such as separating the navigation area from the content area, or using elements besides UL and LI) so you may not be better off by switching. Furthermore, I've not witnessed any of the bugginess with EasyTabs that is reported in other answers here, but the documentation is weak, admittedly.

来源：https://stackoverflow.com/questions/16068506/ajax-tabs-setup-not-working-on-localhost-easytabs

标签

javascript

jquery

css

ajax

tabs