在Bootstrap Tour中禁用/隐藏“结束巡视”按钮

Question

使用bootstrap-tour插件（http://bootstraptour.com/），我想在每一步中禁用或隐藏默认的“结束巡视”按钮，但最后一步除外。

我尝试修改步骤模板以完全摆脱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. 默认情况下将.btn-end设置为隐藏，使用CSS： .btn-end { display: none; }

3. 使用CSS中的#step-x ID定位最后一步。最后一步ID将是步数减去1（因为计数从0开始）。如果您有5个步骤，则ID为#step-4（5 - 1 = 4 ）。
   #step-4 .btn-end { display: block; }

请参阅此处的工作示例：http://jsfiddle.net/Zfu5f/2/

Answer 2

Axel回答的另一种方法是使用数据部分作为CSS选择器：

1. 默认情况下将结束按钮设置为隐藏：.popover-navigation [data-role="end"] { display: none; }
2. 使用：#step-4 .popover-navigation [data-role="end"] { display: block; }
定位最后一步

这缩短了步骤的数量，如果您在其他地方定义了自定义弹出框，则可以防止您重新复制该模板。