链接到特定的引导标签从另一页Wordpress

我在我的Wordpress网站上使用引导标签简码。我想从另一个页面链接到tab2。任何人都可以建议如何做到这一点？链接到特定的引导标签从另一页Wordpress

我的页面代码（切碎了一下）：

[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>

来源

2013-10-24 dvent

又有什么标记，这简码产生的？ – brasofilo

现在加上:) – dvent

虽然没有在WordPress，这似乎是明确的解决方案，连接来引导标签： 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”和id =“content”的HTML元素，无论它是在主动/非主动Bootstrap选项卡还是在某个页面上。

希望这有助于：

这里是在GitHub上的插件：https://github.com/marinersmuseum/WP-Tab-Anchors/blob/master/wp-tab-anchors.zip

来源

2014-07-09 15:35:56 Adam

假设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中。

来源

2013-10-24 23:03:17 brasofilo

链接到特定的引导标签从另一页Wordpress

回答

相关问题