Javascript 禁用/隐藏“；“结束旅行”；引导程序中的按钮

使用

bootstrap-tour

plug-in（），我想禁用或隐藏每个步骤上的默认“End-tour”按钮，最后一个步骤除外

我试图修改步骤模板以完全摆脱

结束巡更

按钮，但如何在最后一步激活它

使用模板参数将类

.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>"
});  

var-tour=new-tour({
模板：“«上一步»结束巡更”
});  

使用CSS将

.btn end

设置为默认隐藏：

.btn end{display:none；}

使用CSS中的

#step-x

ID，以最后一步为目标。最后一步ID将是步数减去1（计数从0开始）。如果您有5个步骤，Id将是

#步骤4

（5-1=4）。

#步骤4.btn结束{display:block；}

---

请参见此处的工作示例：

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

将结束按钮设置为默认隐藏：

.popover导航[data role=“End”]{display:none；}

使用：

#步骤4.popover导航[data role=“end”]{display:block；}

这将缩短步骤的数量，如果您在其他地方定义了自定义popover，则可以避免重新复制该模板