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

很难通过“标签中的标签之间的链接”来表达您的意思。但是，如果您希望页面上任何位置的链接能够控制哪个标签处于活动/可见状态，那么这可能有所帮助。 / p>

如果您在一个页面上有多组标签，请将“tabs-wrapper”元素设为唯一ID。

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

将所有链接用于切换选项卡，如“tab-link”和数据属性，如应链接到哪个选项卡。

<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');
}

链接到动态创建的页面链接锚点

1 个答案: