javascript - 在 Bootstrap Tour 中禁用/隐藏 "End tour"按钮

Question

使用 bootstrap-tour 插件 ( http://bootstraptour.com/ )，我想在除最后一步之外的每个步骤上禁用或隐藏默认的“End Tour”按钮。

我尝试修改步骤模板以完全摆脱 End Tour 按钮，但如何在最后一步激活它？

Answer 1

1. 使用模板参数将类 .btn-end 添加到您的结束按钮:

   var tour = new Tour({
       template: "<div class='popover tour'><div class='arrow'></div><h3 class='popover-title'></h3><div class='popover-content'></div><nav class='popover-navigation'><div class='btn-group'><button class='btn btn-default' data-role='prev'>« Prev</button><button class='btn btn-default' data-role='next'>Next »</button></div><button class='btn btn-default btn-end' data-role='end'>End tour</button></nav></div>"
   });  
   

2. 使用 CSS 将 .btn-end 设置为默认隐藏: .btn-end { 显示:无；

3. 针对最后一步，使用 CSS 中的 #step-x ID。最后一步 ID 将是步数减 1(因为计数从 0 开始)。如果您有 5 个步骤，则 ID 将为 #step-4 (5 - 1 = 4)。
   #step-4 .btn-end { 显示: block ； }

请在此处查看工作示例:http://jsfiddle.net/Zfu5f/2/