1

この投稿を見つけました

http://www.netmagazine.com/tutorials/create-jquery-tab-system

そして、私の現在のデザインに合うようにこのタブを変更しました。必要なのは、このタブプラグインをハッシュタグで機能させることだけです。たとえば、ユーザーがmydomain.com/#firstTabを開いた場合は、このタブを開きます。

私のコードはそのように見えます

var url, tabToken;
$(function() {

    var indicator = $('#indicator'),
    indicatorHalfWidth = indicator.width()/2,
    lis = $('#tabs').children('li');

    $("#tabs").tabs("#content section", {
        effect: 'fade',
        fadeOutSpeed: 0,
        fadeInSpeed: 400,
        onBeforeClick: function(event, index) {
            var li = lis.eq(index),
            newPos = li.position().left + (li.width()/2) - indicatorHalfWidth;
            indicator.stop(true).animate({
                left: newPos
            }, 600, 'easeInOutExpo');
        }
    }); 

});

$(document).ready(function() {
    url = document.location.href;
    tabToken=url_data = url.split('#')[1];
    if(tabToken){
         What to do???
    }
});

私が投稿したリンクを見て、ハッシュタグで動作させることができるかどうかを確認してください。同様のデザインのプラグインが見つからないため、このプラグインを変更したくありません。

4

1 に答える 1

1

あなたが参照しているチュートリアルはjQuery tools tab systemを使用しているようです。

戻るボタンのサポートとともに履歴オプションが既にあります

http://jquerytools.org/demos/tabs/history.html#tab3 を確認してください

$(function() {
  $(".css-tabs:first").tabs(".css-panes:first > div", { history: true });
});

http://jquerytools.org/demos/tabs/history.html#tab1

http://jquerytools.org/demos/tabs/history.html#tab2

http://jquerytools.org/demos/tabs/history.html#tab3

また、内部リンクについてはこれを確認してください

http://jquerytools.org/demos/tabs/anchors.html

于 2012-07-19T00:42:24.637 に答える