如何在JQuery中使用定位标记从其他页面选择特定选项卡？

Question

我想知道我们是否可以从另一个页面选择JQuery选项卡系统中的特定选项卡。 例如，我有3个菜单部分，分别是“主页”，“服务”，“联系人”。

在服务页面中，我现在具有一个带有3个标签的标签系统（Name1，Name2，Name3）。 例如，我在主页中，在“服务”下的子菜单中，具有指向选项卡的链接（Name1，Name2，Name3）。

如果单击子菜单中的name2，则需要在服务页面中显示Name2选项卡（默认可见的一个是Name1）。

我试图给它这样的链接......不幸的是，services.php＃tab2（如锚标记方法）不起作用。

我将以下JQuery用于我的标签系统...

var $j = jQuery.noConflict();
        $j(window).load(function(){
            initTabs();
});

function initTabs(){

    var strHash = document.location.hash;

    if (strHash == "") {

    if($j('.tabs').length){
        var $tabsNav = $j('.tabs-nav');
        var $tabsNavLis = $tabsNav.children('li');
        $tabsNav.each(function() {
            var $this = $j(this);
            $this.next().children('.tab-content').stop(true,true).hide().first().show();
            $this.children('li').first().addClass('active').stop(true,true).show();
        });
         } else

        $("a[href='" + strHash + "']").parent().click();


        $tabsNavLis.on('click', function(e) {
            var $this = $j(this);
            $this.siblings().removeClass('active').end().addClass('active');
            $this.parent().next().children('.tab-content').stop(true,true).hide().siblings( $this.find('a').attr('href') ).fadeIn();
            e.preventDefault();
        }); 
    }}

标签导航如下：

    <ul class="tabs-nav">
                <li><a href="#tab-1">name1</a></li>
                <li><a href="#tab-2">name2</a></li>
                <li><a href="#tab-3">name3</a></li>
     </ul>

<div class="tabs-container">
            <div id="tab-1" class="tab-content" style="display: none;">TABLE 1</div>
            <div id="tab-2" class="tab-content" style="display: none;">TABLE 2</div>
            <div id="tab-3" class="tab-content" style="display: none;">TABLE 3</div>
        </div>

在主页上，我有一个像波纹管这样的菜单选项，因此，如果有人单击主页上的menu2，则应将他重定向到服务页，但打开tab2。

<nav class="menu-container">
<ul class="menu" id="">
<li id="menu-item" class=""><a class="" href="services.php#tab2" style="line-height: 82px;"><span>Name2</span></a></li>
<li id="menu-item" class=""><a class="" href="services.php#tab3" style="line-height: 82px;"><span>Name3</span></a></li>
</ul>
</nav>

我希望有人可以回答上述问题。

非常感谢

标记

Answer 1

我设法通过在页面加载时检查哈希值，然后触发单击来找到解决方案。 这是完整的代码，希望对您有所帮助。

var $j = jQuery.noConflict();
    $j(window).load(function(){
        initTabs();
});

function initTabs(){

    if($j('.tabs').length){
        var $tabsNav = $j('.tabs-nav');
        var $tabsNavLis = $tabsNav.children('li');
        $tabsNav.each(function() {
            var $this = $j(this);
            $this.next().children('.tab-content').stop(true,true).hide().first().show();
            $this.children('li').first().addClass('active').stop(true,true).show();
        });
        $tabsNavLis.on('click', function(e) {
            var $this = $j(this);
            $this.siblings().removeClass('active').end().addClass('active');
            $this.parent().next().children('.tab-content').stop(true,true).hide().siblings( $this.find('a').attr('href') ).fadeIn();
            e.preventDefault();
        });

    var hash = $j.trim( window.location.hash );
    if (hash) $j('.tabs-nav a[href$="'+hash+'"]').trigger('click'); 

    }
}

Answer 2

一种解决方案是使用cookie，存储要访问的选项卡的名称，并使用cookie值以编程方式选择选项卡。