Попытка создать внешнюю гиперссылку, чтобы открыть определенную вкладку - PullRequest
Новая
       37

Попытка создать внешнюю гиперссылку, чтобы открыть определенную вкладку

0 голосов
/ 02 июня 2019

Я хочу иметь возможность делиться ссылками с другими, которые будут по отдельности открывать любые вкладки на моей странице: 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>

Может ли кто-нибудь помочь мне с этим? Огромное спасибо заранее! Brent

...