jQuery,使用hashtags

时间:2012-07-19 00:33:13

标签: javascript jquery tabs jquery-tools hashtag

我找到了这篇文章

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

并修改此标签以适合我当前的设计。我唯一需要的是使这个选项卡插件与hashtags一起工作。例如,如果用户打开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???
    }
});

请查看我发布的链接,并检查我是否可以使用主题标签进行操作?我不想更改这个插件,因为我找不到任何类似设计的插件。

1 个答案:

答案 0 :(得分: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