2

我在我的 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>
4

2 回答 2

1

虽然不在 WordPress 中，但这似乎是链接到引导选项卡的最终解决方案： Twitter 引导选项卡：在页面重新加载或超链接上转到特定选项卡

话虽如此，我写了一个 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 元素，无论它是在活动/非活动引导选项卡上还是只是在某个页面上。

希望这可以帮助：

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

于 2014-07-09T15:35:56.060 回答
1

假设正在加载 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
}

应该是一个插件，但是你可以把代码放到你的主题functions.php中。

于 2013-10-24T23:03:17.173 回答