1
使用引導之旅,我使用所謂的BootstrapTour在引導標籤
我使用它在我的引導標籤這個真棒引導插件。
所以你可以看到它是一個Tab平板英寸
我現在想實現的是包含「基本信息」標題。
的問題是我不知道是怎麼實現的那一個。
我的代碼是這樣的:
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
});
任何想法請:
初始化引導旅遊<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文件?
謝謝!