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值以编程方式选择选项卡。

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

2 个答案: