0

ページの「index.php」にいくつかのタブ（jQuery UIタブ）があります。このページにはコンテンツが表示されるだけでなく、$_GET変数を取得してタブの下に他のコンテンツを表示します。

href問題は、 （クリックされたのattr）がJSで呼び出された現在のindex.phpページに（GET）を送信する必要があるキー「href」の値であることをjQuery UIに伝える方法ですwindow.location.pathname（私は使用できませんPHPで生成されたJavaScript）。

コードはこれです、そして私は物事を機能させる方法のオプションがありません。

jQuery('#front-tab').tabs({
    spinner: "Loading...",
    select: '#tab-one',
    cache: true,
    fx: {  height: 'toggle', opacity: 'toggle' },
    url: window.location.pathname,
    ajaxOptions: {
        type: 'get',
        success: function(){alert('Sucess');},
        error: function(){alert('I HAZ FAIL');};
        },
        dataType: 'html'
    }
});

HTML：

<div id="front-tab">
    <ul>
        <li><a href="#tab-home"><span>Home</span></a></li>
        <li><a href="tab-1"><span>Tab Content 1</span></a></li>
        <li><a href="tab-2"><span>Tab Content 2</span></a></li>
        <li><a href="tab-3"><span>Tab Content 3</span></a></li>
        <li><a href="tab-4"><span>Tab Content 4</span></a></li>
    </ul>
    <div id="tab-home">
        content...
    </div>
</div>

はい、他のタブを読み込もうとするたびに、「IHAZFAIL」でいっぱいになります。最初のタブはインラインHTMLですが、残りはAjaxです。url: window.location.pathnameうまくいかないか、正しい方向を指していないようです。まあ、それが私が探していることをするかどうかはわかりません。

4

2 に答える 2

0

さて、jQuery UIタブの柔軟性がないことに気付いた後、私は自分でアクションを複製する必要がありました。さらに良いことに、2つのプラグインと比較して数行のコードです。

front_tab.click(function(e) {
    // Content parent
    tab_content = $('#tab-content');

    // other variables
    var tab_visible = tab_content.children('div.visible'),
        span = $(this).children('span'),
        span_value = span.html(),
        value = $(this).attr('href'),
        // This gets our target div (if exists)
        target = tab_content.children(value);

    // There is no anchor
    e.preventDefault();

    // Don't do nothing if we are animating or "ajaxing"
    if (tab_content.children().is(':animated') || is_ajaxing) { return; };

    // Put the "selected" style to the clicked tab
    if (!$(this).hasClass('selected')) {
        front_tab.removeClass('selected');
        $(this).addClass('selected');
    }

    // If is target div, call it
    if (target.length > 0) {
        is_ajaxing = true;
        span.html('Loading...');
        tab_content.children().removeAttr('class');
        tab_visible.slideUp('slow', 'swing', function(){
            // Some timeout to slow down the animation
            setTimeout(function() {
                target.attr('class', 'visible').slideDown('slow');
                if (value = '#tpopular') { update_postbox(); }
                is_ajaxing = false;
                span.html(span_value)
            }, 400);
        });
    // So, the target div doesn't exists. We have to call it.
    } else {
        is_ajaxing = true;
        span.html('Cargando...');
        $.get(
        window.location.pathname,
        { href : value },
        function(data) {
                tab_visible.slideUp('slow', 'swing', function(){
                    setTimeout(function() {
                        tab_content.children().removeAttr('class');
                        tab_content
                            .append(unescape(data))
                            .children(value)
                            .css('display', 'none')
                            .attr('class', 'visible')
                            .slideDown('slow');
                        if (value = '#tpopular') { update_postbox(); }
                        is_ajaxing = false;
                        span.html(span_value)
                    }, 800);
                });
            },
        'html');
    }
});

次の問題は素晴らしいエラー警告を出すことですが、それが解決策です。

于 2012-06-27T01:54:30.187 に答える
0 
function initTabs(elementHref) {
    jQuery('#front-tab').tabs({
        spinner: "Loading...",
        select: '#tab-one',
        cache: true,
        fx: {  height: 'toggle', opacity: 'toggle' },
        url: elementHref,
        ajaxOptions: {
            type: 'get',
            success: function(){alert('Sucess');},
            error: function(){alert('I HAZ FAIL');};
            },
            dataType: 'html'
        }
    });
}

jQuery('yourLink').on('click', function() {
    initTabs(jQuery(this).attr('href'));
});
于 2012-06-26T02:45:32.100 に答える