2015-11-26 179 views
1

使用引導之旅,我使用所謂的BootstrapTour在引導標籤

我使用它在我的引導標籤這個真棒引導插件。

這是它的外觀現在: enter image description here

所以你可以看到它是一個Tab平板英寸

我現在想實現的是包含「基本信息」標題。

的東西看起來像這樣: enter image description here

的問題是我不知道是怎麼實現的那一個。

我的代碼是這樣的:

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文件?

謝謝!

回答

0

不知道這是否會解決您的問題,但由於背景被覆蓋的標籤,現在,你能不能做以下更改元素上的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'); 
} 

當然,我沒我不會測試這個,但我會試一試!