尝试创建外部超链接以打开特定选项卡

时间:2019-06-01 22:30:57

标签: hyperlink tabs external

我希望能够与其他人共享链接,这些链接将分别打开页面上的任何标签:https://brentwallace.com/juice-plus-nutrition/。我无法直接硬编码或编辑某些HTML,因为我正在使用Divi页面构建器。我是jQuery的新手,但我认为我只是缺少执行此操作的正确脚本。

我找到了该页面(https://foundation.zurb.com/forum/posts/25367-link-to-particular-tab),并将代码简化为它在测试环境中的工作位置,但是我需要将类似的内容应用于实际页面。

<ul>
  <li><a href="#tab1" tabindex="1">Tab 1</a></li>
  <li><a href="#tab2" tabindex="2">Tab 2</a></li>
  <li><a href="#tab3" tabindex="3">Tab 3</a></li>
</ul>

<div>
  <section id="tab1" tabindex="1">
    <h2>First Panel Header</h2>
    <p id="tabcontent-1">First panel content goes here...</p>
  </section>
  <section id="tab2" tabindex="2">    <section id="tab3" tabindex="3">
    <h2>Third Panel Header</h2>
    <p id="tabcontent-3"> Third panel content goes here...</p>
  </section>
</div>

我将以下jQuery添加到我的页面,并将tabindex最初添加到选项卡内容。那没有用,所以我然后将其应用于选项卡本身,也没有用。当前它被设置在选项卡上。

我页面的选项卡使用以下jQuery现在可以正常运行,并且运行良好:

/* Blurbs as Tabs */ 
$('.tab-title').each(function () { 

var section_id = $(this).find("a").attr("href");
$(this).find("a").removeAttr("href");

$(this).click(function() {

$(this).siblings().removeClass("active-tab");
$(this).addClass("active-tab");
$('.tab-content').hide();
$(section_id).show();
});

});

我还没有遇到任何错误,但这根本不起作用:

<a href="https://brentwallace.com/juice-plus-nutrition#tab3" tabindex="3" target="_blank">Tab 3</a>

有人可以帮我吗? 提前非常感谢您! 布伦特

0 个答案:

没有答案