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 工具选项卡系统，

它已经具有历史选项以及后退按钮支持

检查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 回答