在 Bootstrap 选项卡中使用 Bootstrap Tour答案

【问题标题】：Using Bootstrap Tour in a Bootstrap Tab在 Bootstrap 选项卡中使用 Bootstrap Tour
【发布时间】：2016-08-12 01:26:39
【问题描述】：

我正在使用这个很棒的引导插件 BootstrapTour

我在我的引导选项卡上使用它。

这是它现在的样子：

如您所见，它位于标签面板中。

我现在想要实现的是包含“基本信息”标题。

看起来像这样：

问题是我不知道如何实现。

我的代码是这样的：

<div role="tabpanel" style="margin-top:30px;">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" id="cp-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#basicInfo" aria-controls="basicInfo" role="tab" data-toggle="tab">Basic Information</a></li>
                <li role="presentation"><a href="#clients" aria-controls="clients" role="tab" data-toggle="tab">Clients</a></li></a></li>
            </ul>
<div class="tab-content" id="tabContent">
    <div role="tabpanel" class="tab-pane fade in active" id="basicInfo">... ...          </div>

     <div role="tabpanel" class="tab-pane fade agency_content" id="clients">
     </div>
</div>

我的初始化引导程序的 JS 文件：

var tour = new Tour({
        storage:false,
        steps: [
            {
                element: "#btn_add_client",
                title: "Add a Client",
                content: "Hello There! <br />Welcome to 2020 Dashboard!<br />You can start by adding your client.<br />Don't be shy and click the Add a Client button to get started and we’ll walk you through it.",
                placement:'left'
            },
            {
                //element: "#cp-tabs li:first-child",
                element: "#basicInfo",
                title: "Your Basic Information",
                content: "This is your account information for 2020Dashboard. You can access it anytime from the Control Panel.",
                placement: 'top',
                backdropPadding: "15px",
                onShown:function(tour){
                    jQuery(".tour-step-background").css("height","0px");
                    jQuery("#basicInfo").css("background","white");

                    jQuery('.nav-tabs a[href="#basicInfo"]').tab('show');
                }
            },
            {
                element: "#cp-tabs li:nth-child(2)",
                title: "Clients List",
                content: "Here is the list of the clients your agency is managing. You can access their basic info and add or updated connected accounts from their control panel pages.",
                onShown:function(tour){
                    jQuery('.nav-tabs a[href="#clients"]').tab('show');
                }
            },
            {
                element: "#search-dropdown",
                title: "Client Selection Tool",
                content: "When you're ready to start looking at data, select the client you want to manage from this dropdown."
            },
            {
                element: "#supportBtnLi",
                title: "Help",
                content: "Click here if you need more help.",
                placement: "bottom"
            }
        ],
        backdrop:true
    });

有什么想法吗？

谢谢！

【问题讨论】：

标签： jquery html twitter-bootstrap-3 bootstrap-tour

【解决方案1】：

不确定这是否能解决您的问题，但由于背景现在覆盖选项卡，您是否可以通过执行以下操作更改元素上的 z-index：

onShown:function(tour){
    jQuery(".tour-step-background").css("height","0px");
    jQuery("#basicInfo").css("background","white");

    jQuery('.nav-tabs a[href="#basicInfo"]').tab('show');
    jQuery('.nav-tabs a[href="#basicInfo"]').attr('style', 'zindex:1000');
}

当然，我没有对此进行测试，但我会试一试！

【讨论】：