Link 到一个页面然后打开 JQuery 选项卡

Question

我有一个基本的响应式标签布局，用作我网站的模板。

我希望能够 link 到包含选项卡（代码下方）的页面，但打开页面时选择了 1 个特定选项卡。

例如，我有 3 个按钮，它们分别 link 到按钮 1、2 和 3。我点击 'Button 2'。我希望页面在 'Button 2' 选项卡打开的情况下打开。

//Button active toggler
$('.btn').on('click', function(e) {
  e.preventDefault();
  if ($(this).hasClass('active')) {
    //Do nothing
  } else {
    // Hide other dropdowns
    $('.active').removeClass('active');
    // Open this dropdown
    $(this).addClass('active');
  }
});

//Components toggle
$(function() {
  $('.targetDiv').hide();
  $('#div1').show();
  $('.switch').click(function() {
    if ($(window).width() < 576) {
      $('.targetDiv').hide();
      $('#div' + $(this).attr('target')).show();
      //In mobile, scroll to top of active div when shown
      $('html, body').animate({
        scrollTop: $('.active').offset().top - 16
      }, 1000);
    } else {
      $('.targetDiv').hide();
      $('#div' + $(this).attr('target')).show();
    }
  });
});

.buttons-desktop-only {
  display: none;
}

@media (min-width:48em) {
  .buttons-desktop-only {
    display: block;
  }
  .button-mobile-only {
    display: none;
  }
}

.targetDiv {
  width: 200px;
  height: 200px;
}

#div1 {
  background: green;
}

#div2 {
  background: yellow;
}

#div3 {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="buttons-desktop-only">
  <a class="btn switch active" target="1">Button 1</a>
  <a class="btn switch" target="2">Button 2</a>
  <a class="btn switch" target="3">Button 3</a>
</div>
<div class="wrapper">
  <div class="button-mobile-only">
    <a class="btn switch active" target="1">Button 1</a>
  </div>
  <div id="div1" class="targetDiv" target="1">Test 1</div>
  <div class="button-mobile-only">
    <a class="btn switch active" target="2">Button 2</a>
  </div>
  <div id="div2" class="targetDiv" target="2">Test 2</div>
  <div class="button-mobile-only">
    <a class="btn switch active" target="3">Button 3</a>
  </div>
  <div id="div3" class="targetDiv" target="3">Test 3</div>
</div>

一些伪代码来描述我想做什么：

页面link转到标签页

<a href="mypage#button2">Got to button2 on another page</a>

标签页

<a id="button1">button1</a>
<a id="button2">button2</a>
<a id="button3">button3</a>

Answer 1

解决方案：

1) 向页面的任何 link 添加一个键，例如mypage.html?tab=2

2) 在 DOM 加载后运行s 的页面添加一些 Javascript 从 location.query 和运行s 读取密钥你的按钮开关

3) 分离您的按钮切换器函数，使其在您的 jQuery 事件侦听器中不是匿名函数，但可以由读取键

的新函数执行

让我们从#1 开始。对于此页面的任何 link，您需要在其末尾添加一个查询字符串 key-value 对，以指示在显示页面时激活哪个选项卡。例如，如果您的 link 是 https://mywebsite.com/tabs.html, and you want tab 2 to open, then the new link would be https://mywebsite.com/tabs.html?tab=2.

按照上述方式更新每个 link 后，是时候向带有选项卡的页面添加一些 Javascript，例如tabs.html JS 需要在 DOM 加载后运行，我们可以通过 jQuery 处理（我假设你早就知道了...)

$(function(){


  // examine the URL's querystring
  
  var qs = new URLSearchParams(location.href); // 
  
  // test if the querystring contains a "tab" key-value pair, and if so, do something with it
  
  if( qs.get("tab")!=null ){
  
    let tabToLoad = qs.get("tab"); // contains "2" if the URL of the page is mypage.html?tab=2
    
    // call your tab toggler, and pass it the tab variable
    
    TabToggler(tabToLoad);    
      
  }

});


// this function hides all tabs, then displays the desired tab
function TabToggler(strTabID){
    var alltabs = $('.targetDiv');
    alltabs.removeClass('active');

    var tabToLoad = $('[target="'+ strTabID +'"]');
    
    if(!tabToLoad.hasClass('active')){
        tabToLoad.addClass('active');
    }
}

Answer 2

Link 使用 href="mypage.html?tab=2"

到页面

将以下JQuery添加到目标页面读取URL查询

$.urlParam = function (name) {
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    return results[1] || 0;
}

$(function () {

    // examine the URL's querystring

    var tabToLoad = $.urlParam('tab');
    console.log(tabToLoad);

    // test if the querystring contains a "tab" key-value pair, and if so, do something with it

    if (tabToLoad != null) {

        TabToggler(tabToLoad);

    }

});


// this function hides all tabs, then displays the desired tab
function TabToggler(strTabID) {
    var allbtns = $('.btn');
    var alltabs = $('.targetDiv');
    alltabs.hide();
    allbtns.removeClass('active');

    var tab = $('[target="' + strTabID + '"]');

    if (!tab.hasClass('active')) {
        tab.addClass('active');
        tab.show();
    }
}

Link 到一个页面然后打开 JQuery 选项卡

Link to a page then open JQuery tab

html

anchor

jquery