Question

我正在使用这个名为BootstrapTour

的强大引导程序插件

我在我的Bootstrap Tab上使用它。

这就是现在的样子：

因此，您可以看到它位于选项卡面板中。

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

看起来像这样：

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

我的代码是这样的：

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

初始化bootstrap tour的我的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
    });

有什么想法吗？

谢谢！

Answer 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');
}

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

在Bootstrap选项卡中使用Bootstrap Tour

1 个答案: