Ссылка на конкретную вкладку бутстрапа с другой страницы Wordpress

Question

Я использую короткие ярлыки вкладки начальной загрузки на моем сайте Wordpress. Я хочу связать ссылку с другой страницы на tab2. Может ли кто-нибудь посоветовать, как это делается?

Мой код страницы (рубленый немного):

[bootstrap_tab name="TAB1" link="tab1-slug" active="active"] 
TAB 1 Content 
[/bootstrap_tab] 
[bootstrap_tab name="TAB2" link="tab2-slug"] 
More content 
[/bootstrap_tab] 
[bootstrap_tab name="TAB3" link="tab3-slug"] 
Yep. Even more content. 
[/bootstrap_tab] 
[bootstrap_tab name="TAB4" link="tab4-slug"] 
Yep. Even more content. 
[/bootstrap_tab] 
[end_bootstrap_tab] 

Код производит:

<ul id="tabs" class="nav nav-tabs" data-tabs="tabs"> 
    <li class="tabs active"> 
     <a data-toggle="tab" href="#tab1-slug">TAB1</a> 
    </li> 
    <li class="tabs "> 
     <a data-toggle="tab" href="#tab2-slug">TAB2</a> 
    </li> 
    <li class="tabs "> 
     <a data-toggle="tab" href="#tab3-slug">TAB3</a> 
    </li> 
    <li class="tabs "> 
     <a data-toggle="tab" href="#tab4-slug">TAB4</a> 
    </li> 
</ul> 
<div id="my-tab-content" class="tab-content"> 
    <div id="tab1-slug" class="tab-pane active"> 
     <p></p> 
     <h2>header</h2> 
     <p><strong>bold</strong></p> 
     <p>content</p> 
     <p></p> 
    </div> 
    <div id="tab2-slug" class="tab-pane "> 
     <p></p> 
     <h2>TAB2</h2> 
     <p><strong>These are usually two day</strong></p> 
    </div> 
    <div id="tab3-slug" class="tab-pane "> 
     <p></p> 
     <h2>TAB3</h2> 
     <p>1 to 2 day events</p><p></p> 
    </div> 
    <div id="tab4-slug" class="tab-pane "> 
     <p> 
      <h2>TAB4</h2> 
      <p><strong>5 to 10 day courses</strong></p> 
    </div> 
</div> 

Answer 1

Хотя не в WordPress, это, кажется, окончательное решение ссылки на Bootstrap закладки: Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink

Это, как говорится, я написал WordPress плагин, который будет делать это. Активируйте плагин, тогда вы сможете использовать href вкладки в качестве хэша.

Если вкладка выглядит следующим образом:

<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li> 

Вы можете связаться с ним и активировать/открыть его с помощью ссылки, как это:

<a href="/page-with-my-tab/#profile">Link to my tab</a> 

Плагин также позволяет напрямую связать к содержимому на вкладках, используя своего рода двухступенчатую ссылку: Шаг 1 Активируйте соответствующую вкладку Шаг 2 Выделите содержимое на вкладке.

Он делает это, используя только один хэш в URL-адресе. Например: http://www.example.com/mypage/#content

Это приведет вас к «mypage» и элементу HTML с id = «content», независимо от того, находится ли он на активной/неактивной вкладке Bootstrap или просто на странице.

Надеется, что это помогает:

Вот плагин на GitHub: https://github.com/marinersmuseum/WP-Tab-Anchors/blob/master/wp-tab-anchors.zip

Answer 2

Предположив, что Jquery загружается и что ссылка URL это что-то вроде

http://example.com/page-with-tabs/?tab=NUMBER 

Мы печатаем условный скрипт в нижнем колонтитуле:

add_action('wp_footer', 'active_tab_so_19576232'); 

function active_tab_so_19576232() 
{ 
    # Query var not set in URL, bail out 
    if(!isset($_GET['tab'])) 
     return; 

    # Change the active tab 
    $tab = '#tab'. $_GET['tab'] .'-slug'; 
    ?> 
    <script type="text/javascript"> 
    jQuery(document).ready(function($) { 
     $('div.tab-pane.active').removeClass('active'); 
     $('<?php echo $tab; ?>').addClass('active'); 
    }); 
    </script> 
    <?php 
} 

Should be a plugin, но все символы вы можете оставить в своей теме functions.php.