2

使用bootstrap-tour插件（http://bootstraptour.com/），我想禁用或隐藏每个步骤上的默认“结束游览”按钮，除了最后一步。

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

4

2 回答 2

3

Axel 答案的替代方法是将数据部分用作 CSS 选择器：

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

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

于 2014-06-13T00:11:09.507 回答
3

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

在这里查看一个工作示例：http: //jsfiddle.net/Zfu5f/2/

于 2013-09-12T15:30:07.573 回答