Question

需要以下脚本的帮助。我想添加传递url参数的功能，该参数将根据URL＃tabinfo打开其中一个选项卡。任何帮助都会非常感谢。

(function ($) {
    function getactTabAnc() {
        return this.find('.active>a')[0];
    }

    function getContentId(tabAnchorS) {
        return $(tabAnchorS).attr('href').replace('#', '');
    }

    function applyStyles(newActTabAnc) {
        var actTabAnc = newActTabAnc || getactTabAnc.apply(this), activeContentId = getContentId(actTabAnc);
        this.find('a').each(function () {
            var $cur = $(this), curContentId = getContentId(this);
            if (activeContentId === curContentId) {
                $cur.closest('li').addClass('active');
                $('#' + curContentId).show();
            }
            else {
                $cur.closest('li').removeClass('active');
                $('#' + curContentId).hide();
            }
            });
    }

    $.fn.tabs = function () {
        return this.each(function () {
            var $tabTainer = $(this);

            applyStyles.apply($tabTainer);

            $tabTainer.find('a').click(function (e) {
                console.log('clicked');
                var actTabAnc = getactTabAnc.apply($tabTainer), isActive = this === actTabAnc;
                e.preventDefault();
                if (!isActive) {
                    applyStyles.apply($tabTainer, [this]);
                }
            }); 
        });
    };
})(jQuery);


  <ul id="tabsHolder">
    <li class="active"><a href="#tabId1">Header 1</a></li>
    <li><a href="#tabId2">Header 2</a></li>
   </ul>

   <div id="tabId1">Content 1</div>
   <div id="tabId2">Content 2</div>

Answer 1

查看window.location.hash和onhashchange事件。如果('onhashchange' in window)为false，则需要轮询哈希更改。

存在可以抽象出来的库。

帮助使用URL参数打开标签信息

1 个答案: