我正在玩 Bootstrap Tour，但我发现自己在导航页面上卡住了。
在我的导览中，第四步将用户从 index.cshtml 带到 page.cshtml，这工作正常，但是导览框未在 page.cshtml 中打开，因此我无法从目标页面返回。
在 bootstraptour.com 的 Bootstrap 导览演示中，我无法识别用于打开 page.cshtml 中的导览弹出窗口或处理返回到 index.cshtml 的 javascript。在 Bootstraptour 演示 page.html 中只有一个 div，其中包含一个名为 container 的类和依赖项链接。
我尝试了不同的选择，但没有任何乐趣。那么，任何人都可以帮我在 page.cshtml 中打开一个弹出窗口并使用它导航回原始的 index.cshtml 吗？谢谢。
这是我所拥有的:
index.cshtml
@{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<!-- Le Bootstrap Styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Bootstrap Tour -->
<link href="../bootstrap-tour/bootstrap-tour.css" rel="stylesheet">
</head>
<body>
</br>
</br>
<p class="step-handle" id="step-welcome"> step welcome </p></br>
<p class="step-handle" id="step-one"> step 1</p></br>
<p class="step-handle" id="step-two"> step 2 </p></br>
<p class="step-handle" id="step-three"> step 3 </p></br>
<p class="step-handle" id="step-four"> step 4</p></br>
<p class="step-handle" id="step-five"> step 5 </p></br> <!-- DOES STEP FIVE GO IN page.cshtml? -->
<p class="step-handle" id="step-six"> step 6</p></br>
<hr />
<button id="pause-tour">Pause Tour</button>
<hr />
<button id="resume-tour">Resume Tour</button>
</body>
</html>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../bootstrap-tour/jquery.js"></script>
<script src="../bootstrap-tour/bootstrap-tooltip.js"></script>
<script src="../bootstrap-tour/bootstrap-popover.js"></script>
<script src="../bootstrap-tour/bootstrap-tour.js"></script>
<script type="text/javascript">
var tour = new Tour({
afterSetState: function(key, value) {
console.log(key, value, tour.getState(), tour.getStep());
}
});
tour.addSteps([
{
element: "#welcome",
title: "WELCOME",
content: "Welcome to the bootstrap tour"
},
{
element: "#step-one", // string (jQuery selector) - html element next to which the step popover should be shown
title: "Step One Title", // string - title of the popover
content: "Step One Content" // string - content of the popover
},
{
element: "#step-two",
title: "Step Two Title",
content: "Step Two Content"
},
{
element: "#step-three",
title: "Step Three Title",
content: "Step Three Content"
},
{
path: "/page.cshtml",
element: "#step-four",
title: "Step four Title",
content: "Step four Content"
},
{
path: "/",
title: "Step five Title",
content: "Step five Content"
},
{
element: "#step-six",
title: "Step six Title",
content: "Step six Content"
}
]);
tour.restart();
$("#pause-tour").on("click", function() {
tour.end();
});
$("#resume-tour").on("click", function() {
tour.start(true);
});
</script>
page.cshtml
@{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<!-- Le Bootstrap Styles -->
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Bootstrap Tour -->
<link href="../bootstrap-tour/bootstrap-tour.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>This is just a test.</h1>
<p>Nothing to see here. Move on!</p>
</div>
</body>
</html>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../bootstrap-tour/jquery.js"></script>
<script src="../bootstrap-tour/bootstrap-tooltip.js"></script>
<script src="../bootstrap-tour/bootstrap-popover.js"></script>
<script src="../bootstrap-tour/bootstrap-tour.js"></script>
最佳答案
我看到几个问题:
#step-four page.cshtml ) 指定的元素element，我相信一个是必需的，除非您将 orphan 选项设置为 true page.cshtml 中包含所有游览代码，如果您在 page.html 中检查演示源，最后引用的脚本 index.js 包含游览实例。 最后，我不确定这是否会有所不同，但我认为您对
tour.restart(); 和 tour.start(true); 的调用应该交换位置关于javascript - Bootstrap Tour - 如何从目标页面返回？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18815055/