ajax选项卡不反映html页面更改

时间:2014-10-08 07:20:07

标签: html ajax

我在我的一个html页面中使用tab并通过在同一页面上使用ajax加载一些其他页面,但问题是html页面没有反映它与以前保持相同的更改,是否有任何类型的缓存问题或其他我将localhost用于同一个xampp服务器。 js代码是

var containerId = '#tabs-container';
var tabsId = '#tabs';

$(document).ready(function(){
    if($(tabsId + ' LI.current A').length > 0){
        loadTab($(tabsId + ' LI.current A'));
    }

    $(tabsId + ' A').click(function(){
        if($(this).parent().hasClass('current')){ return false; }

        $(tabsId + ' LI.current').removeClass('current');
        $(this).parent().addClass('current');

        loadTab($(this));     
        return false;
    });
});
function loadTab(tabObj){
    if(!tabObj || !tabObj.length){ return; }
    $(containerId).addClass('loading');
    $(containerId).fadeOut('fast'); 
    $(containerId).load(tabObj.attr('href'), function(){
        $(containerId).removeClass('loading');
        $(containerId).fadeIn('fast');
    });
}

html代码是:

<ul class="mytabs" id="tabs">
    <li class="current">
        <a href="tabs/room.html">
            Rooms and Suits
        </a>
    </li>
    <li>
        <a href="tabs/dining.html">
            Dining
        </a>
    </li>
    <li>
        <a href="tabs/spa.html">
            Spa &amp; Wellness
        </a>
    </li>
    <li>
        <a href="tabs/wedding.html">
            Wedding
        </a>
    </li>
    <li>
        <a href="tabs/event.html">
            Meetings &amp; Events
        </a>
    </li>
<!-- 
example how to integrate in php
<li>
<a href="wp-content/themes/himachaldastak/sport.php">
Meetings &amp; Events
</a>
</li> -->
</ul>

<div class="mytabs-container" id="tabs-container">
    <img src="img/ajax-loader.gif" alt="loading.." id="photo_load">
</div>

0 个答案:

没有答案