使用 JQuery 中的锚链接到当前页面和其他页面的特定(隐藏)选项卡? [英] Linking to a particular (hidden) tab from the current page and other pages using anchors in JQuery?

问题描述

我已经检查了这个网站上的多个答案，但无论出于何种原因，他们都无法解决我的问题(如何使用 JQuery 中的锚标记从其他页面中选择特定选项卡..?).我只是在我的本地计算机上对此进行测试，所以我不确定这是否会产生影响.

I've examined multiple answers on this site but they haven't been able to solve my problem for whatever reason (how to select a particular tab from other page using anchor tag in JQuery..?). I am only testing this on my local computer so I'm not sure if that would have an impact.

我想从当前页面和其他页面链接到每个选项卡.现在我可以单击每个选项卡，它可以完美运行，并且站点 URL 会更改(#tab1、#tab2 等).

I want to link to each tab from the current page as well as from other pages. Right now I am able to click each tab and it works perfectly and the site URL changes (#tab1, #tab2 etc).

但是，例如，如果我在选项卡 2 可见时单击选项卡 1 链接(不是实际的选项卡，而是页面上针对选项卡 1 的链接)，则除了 URL 更改为/site 之外什么也没有发生.html#tab1.但是，如果我在选项卡 1 可见时单击选项卡 1 链接，它会成功将我带到选项卡 1.出现问题，因为选项卡是隐藏的 - 链接仅适用于当前可见的选项卡.我想如果我至少可以让它在页面内工作，我也可以通过页面外的链接让它工作.

However, for example, if I click the Tab 1 Link (not the actual tab, but a link on the page that is targeted at tab 1) while Tab 2 is visible, nothing happens but the URL changes to /site.html#tab1. However, if I click the Tab 1 link while Tab 1 is visible, it successfully brings me to Tab 1. Something is going wrong because the tabs are hidden - links only work for the tab that is currently visible. I figure if I can at least get it working within the page, I can get it working from links outside the page as well.

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

Basically, I want to be able to send someone a link to /site.html#tab3 and have it go to that tab.

我的代码:

    $(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>

还有一个示例标签内容 &页面上指向标签的链接:

And an example tab content & a link on the page to the tab:

//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>

谢谢！！

推荐答案

看这个:

在页面加载时执行此操作(当 dom 准备好时)

Do this when your page loads (when dom is ready)

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

what this will do when you get a url like this site.html#tab1

variable tabId 将具有值 #tab1

if 代码块中的条件将显示目标选项卡

then condition in if code block will show the targeted tab

这篇关于使用 JQuery 中的锚链接到当前页面和其他页面的特定(隐藏)选项卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！