javascript - 链接到动态创建的页面链接 anchor

Question

我有一个选项卡元素，其中有 4 个不同的选项卡，每个选项卡包含不同的信息位。

我试图做的是选项卡内选项卡之间的链接。

检查页面后，我注意到链接似乎是在页面重新加载时动态创建的。这是一个选项卡链接在 5 次刷新后的样子。

: http://example.com/#tab-4-172677862
: http://example.com/#tab-4-963556060
: http://example.com/#tab-4-1124062425
: http://example.com/#tab-4-1233139995
: http://example.com/#tab-4-550075197

因此链接输出似乎始终是 #tab-4-123456789 或 #tab-4-1234567890 表示 #tab-4- > 之后带有 9 或 10 数字。

我看到 RegExp [0-9] 表达式应该解释所有数字。

我的基础平台是 PHP，但我认为尝试使用 javascript(或 jquery)获取值将是我最好的选择..

这个 html 有点像

<div class="tabs-wrapper tappable">
    <ul class="nab nav-tabs">
        <li class="tab-1">
          <a href="#tab-1-172677862" data-toggle="tab">Tab 1</a>
        </li>
        <li class="tab-2">
          <a href="#tab-2-172677862" data-toggle="tab">Tab 2</a>
        </li>
        <li class="tab-3">
          <a href="#tab-3-172677862" data-toggle="tab">Tab 3</a>
        </li>
        <li class="tab-4">
          <a href="#tab-4-172677862" data-toggle="tab">Tab 4</a>
        </li>
        <li class="tab-5">
          <a href="#tab-5-172677862" data-toggle="tab">Tab 5</a>
        </li>
    </ul>
</div>

所以我尝试过的是这样的

<a id="tab-4-link">Tab 4</a>

以及我页面顶部的脚本

<script>
var tab1link = $("li.tab-1 > a").attr("href");;
document.getElementById("tab-1-link").setAttribute("href",tab1link);
</script>

但这当然不起作用，因为 li.tab-1 > a 无效。

有人对我如何链接到这些有任何想法吗？我觉得我想得太多了，而且把事情变得过于复杂了。

Answer 1

很难说出“选项卡内选项卡之间的链接”的含义，但是如果您希望页面上任何位置的链接能够控制哪个选项卡处于事件/可见状态，那么这可能会有所帮助。

为您的“tabs-wrapper”元素指定一个唯一的 ID，以防您在一个页面上有多组选项卡。

<div class="tabs-wrapper tappable" id="tabs-example1">

为所有用于切换选项卡的链接提供一个类(如“选项卡链接”)和数据属性(如应链接到哪个选项卡)。

<a href="#" class="tab-link" data-tab="4" data-item="172677862">Tab 4</a>

现在，您可以阻止所有选项卡链接链接上的默认单击操作，并查找它应链接到的选项卡，然后根据需要切换选项卡。

$(document).on('click', '.tab-link', function (evt) {
  // Prevents the page from reloading on click
  evt.preventDefault(); 
  var link = $(this);
  // optional unless you have more than one set of tabs on a page
  var group = link.closest('.tabs-wrapper').attr('id');
  // Reads the tab number attribute as an integer
  var tabNum = parseInt(link.data('tab'), 10);
  // Optionally read that other number from a different attribute of the link
  var item = link.data('item');
  // Do something using the tabNum.
  switchTab(tabNum);
});

这是一个选项卡切换功能示例，但这取决于您如何构建选项卡链接与选项卡内容。

function switchTab(group, tabNum) {
  var tabs = $('#' + group + ' .tab');
  if(tabs.length < tabNum) {
    return;
  }
  tabs.removeClass('active').eq(tabNum - 1).addClass('active');
}