Question

我想创建指向其他页面上的打开标签的链接。这是我的html选项卡所在的位置：

// This are internal links
<ul class="tabs">
  <li class="tab-link current" data-tab="tab-1">Tab 1</li>
  <li class="tab-link" data-tab="tab-2">Tab 2</li>
  <li class="tab-link" data-tab="tab-3">Tab 3</li>
  <li class="tab-link" data-tab="tab-4">Tab 4</li>
</ul>

<div id="tab-1" class="tab-content current"><p>some content</p></div>
<div id="tab-2" class="tab-content"><p>some content</p></div>
<div id="tab-3" class="tab-content"><p>some content</p></div>
<div id="tab-4" class="tab-content"><p>some content</p></div>

我使用这个脚本：

$(document).ready(function(){
  $('ul.tabs li').click(function(){
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
  })
})

现在我在外部页面上有这个链接，我想重定向到带有选项卡的页面并显示选项卡2的内容：

<a href="tabpage.html#tab-2>Some link</a>

这不起作用，任何人都可以帮助我吗？也许在元素中使用onclick（）？

Answer 1

在页面加载时读取网址中的哈希值并触发相应的<li>

点击

类似的东西：

$(document).ready(function() {
  // your existing tabs click listener
  $('ul.tabs li').click(function() { .... })
  // get hash from url
  var hash = location.hash;
  // check if tab matching hash exists
  if (hash && $(hash).length) {
    // now trigger click on appropriate tab
    $('.tab-link[data-tab="' + hash.slice(1) + '"]').click();        
  }

})

链接到打开的标签页

1 个答案: