从另一页Wordpress链接到特定的引导选项卡

从另一页Wordpress链接到特定的引导选项卡,wordpress,twitter-bootstrap,tabs,bootstrap-tabs,Wordpress,Twitter Bootstrap,Tabs,Bootstrap Tabs,我正在Wordpress网站上使用引导标签短代码。我想从另一个页面链接到tab2。有人能告诉我怎么做吗 我的页面代码(切碎了一点): 它产生的代码: <ul id="tabs" class="nav nav-tabs" data-tabs="tabs"> <li class="tabs active"> <a data-toggle="tab" href="#tab1-slug">TAB1</a> </li&g

我正在Wordpress网站上使用引导标签短代码。我想从另一个页面链接到tab2。有人能告诉我怎么做吗

我的页面代码(切碎了一点):

它产生的代码:

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

标题 粗体

内容

表2 通常是两天

表3 1到2天的活动

表4 5至10天课程


假设正在加载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
}
add_action('wp_footer','active_tab_so_19576232');
函数活动\u选项卡\u so\u 19576232()
{
#URL中未设置查询变量,退出
如果(!isset($\u GET['tab']))
返回;
#更改活动选项卡
$tab='#tab'.$\u获取['tab'..-slug';
?>
jQuery(文档).ready(函数($){
$('div.tab-pane.active').removeClass('active');
$('').addClass('active');
});

虽然不在WordPress中,但这似乎是链接到引导选项卡的最终解决方案:

话虽如此,我还是写了一个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>
  • 您可以使用以下链接链接到它并激活/打开它:

    <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中的一个散列来实现这一点。 例如:

    这将带您进入“mypage”和id=“content”的HTML元素,无论它是在活动/非活动引导选项卡上,还是仅仅在页面的某个地方

    希望这有助于:


    这是GitHub上的插件:

    ,这个短代码生成的标记是什么?