Question

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

我希望能够链接到包含选项卡的页面（下面的代码），但是打开带有1个特定选项卡的页面。

例如，我有3个按钮，它们分别链接到按钮1、2和3。我点击“按钮2”。我希望在打开“按钮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>

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

页面链接至标签页

<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）将密钥添加到页面的任何链接，例如 mypage.html？tab = 2

2）向加载DOM之后运行的页面添加一些Javascript，该页面从location.query读取密钥并运行按钮切换器

3）分离按钮切换器功能，使其不是jQuery事件侦听器中的匿名函数，但可由读取键的新函数执行

让我们从＃1开始。对于此页面的任何链接，您需要在其末尾添加一个querystring键-值对，以表示在显示该页面时要激活的选项卡。例如，如果您的链接是 https://mywebsite.com/tabs.html ，并且您想打开选项卡2，则新链接将是 https://mywebsite.com/tabs.html?tab=2 。

按照上述方式更新每个链接后，是时候向带有标签的页面添加一些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

使用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();
    }
}

链接到页面，然后打开“ JQuery”选项卡

2 个答案: