Question

我已经在这个网站上检查了多个答案，但由于某种原因（how to select a particular tab from other page using anchor tag in JQuery..?）他们无法解决我的问题。我只在我的本地计算机上测试这个，所以我不确定这是否会产生影响。

我想链接到当前页面以及其他页面中的每个标签。现在我可以单击每个选项卡，它可以正常工作，并且站点URL也会更改（＃tab1，＃tab2等）。

但是，例如，如果我单击选项卡1链接（不是实际选项卡，但页面上的目标是选项卡1的链接），而选项卡2可见，则没有任何反应，但URL更改为/ site。 HTML＃TAB1。但是，如果我在选项卡1可见时单击选项卡1链接，它会成功将我带到选项卡1.出现问题，因为选项卡已隐藏 - 链接仅适用于当前可见的选项卡。我想如果我至少可以在页面内工作，我也可以从页面外的链接开始工作。

基本上，我希望能够向某人发送一个指向/site.html#tab3的链接并将其转到该标签。

我的代码：

    $(document).ready(function() {

      //Default Action
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return;
    });
});

和

$(document).ready(function () {

    var tabId = window.location.hash; // will look something like "#h-02"
    $(tabId).click(); // after you've bound your click listener
});

标签：

 <ul class="tabs">
        <li><a href="#tab1">Ex 1</a></li>
        <li><a href="#tab2">Ex 2</a></li>
        <li><a href="#tab3">Ex 3</a></li>
        <li><a href="#tab4">Ex 4</a></li>

示例标签内容＆amp;选项卡页面上的链接：

//tab content
<div class="tab_container">
        <div id="tab1" class="tab_content">
          <h2>Ex 1</h2>

//Link to Tab 1 from right menu
<ul><li>
<a href="#tab1">Click here to go to tab 1</a></li></ul>

谢谢！

Answer 1

在标签链接中添加公共类。单击该链接时，可以触发相应选项卡上的单击。

HTML

<a href="#tab1" class="tab-link">Click here to go to tab 1</a>

JS

$('.tab-link').click(function(){
    $('ul.tabs li a[href="'+this.href+'"]').parent().click();

});

Answer 2

看到这个：

在页面加载时（当dom准备就绪时）执行此操作

var tabId = location.hash; // will look something like "#h-02"

检查哈希

 if(tabId){
   $(tabId).show(); // this will fired only when url get hash
   $(tabId).siblings().hide(); // this will show only targeted tab 
                               // others get hidden
 }

当您获得此类site.html#tab1

的网址时，这会做什么

variable tabId的值为#tab1

然后在代码块中显示目标选项卡

使用JQuery中的锚点链接到当前页面和其他页面中的特定（隐藏）选项卡？

2 个答案: