文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >引导旅游-如何从目标页面返回？

问引导旅游-如何从目标页面返回？
EN

Stack Overflow用户
提问于 2013-09-15 17:03:23
回答 2查看 2.7K关注 0票数 4

我正在玩自带旅游，我发现我自己被困在导航页。

在我的巡演中，第四步将用户从index.cshtml带到工作正常的page.cshtml，但是在page.cshtml中没有打开旅游框，所以我无法从目标页面导航。

在bootstraptour.com的引导演示中，我无法识别javascript来打开page.cshtml中的浏览弹出或处理返回到index.cshtml的过程。只有一个div，它有一个名为容器的类和Bootstraptour演示page.html中的依赖链接。

没有joy，我试过不同的选择。那么，谁能帮我打开page.cshtml中的弹出并使用它导航回原来的index.cshtml呢？谢谢。

以下是我所拥有的：

index.cshtml

代码语言：javascript
运行
复制
    @{    
}
<!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

代码语言：javascript
运行
复制
    @{

}

<!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>
javascript
twitter-bootstrap
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-09-15 19:56:27

我看到了几个问题：

  1. 您为步骤四(#step-four)指定的元素未在page.cshtml的标记中找到
  2. 步骤五没有定义element，除非您将orphan选项设置为true，否则必须定义一个
  3. 您还必须在page.cshtml中包含所有的浏览代码，如果您在page.html中检查演示的源代码，最后引用的脚本index.js包含了tour实例。

最后，我不确定这会不会有什么区别，但我认为您对tour.restart();和tour.start(true);的调用应该交换位置

票数 2
EN

Stack Overflow用户

发布于 2013-09-16 11:40:44

在再次查看了如何在巡演中导航页面之后，我回到了昨天的位置:从index.cshtml到page.cshtml，然后返回，但是它发生在一次单击- page.cshtml就会打开。浏览步骤弹出不会在page.cshtml中打开，我们也不会停留在该页面上。

因此，我想我应该在page.cshtml (步骤五和步骤六)中再添加一步，并且是宾果！

感谢kuala_dev提供的指针。工作守则如下：

INDEX.CSHTML

代码语言：javascript
运行
复制
@{    
}
<!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-seven"> step 7</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", 
        title: "Step One Title", 
        content: "Step One Content" 
    },
    {
        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"
    },
        {
        element: "#step-five",
        title: "Step five Title",
        content: "Step five Content"
    },
    {
        path: "/index.cshtml",
        element: "#step-six",
        title: "Step six Title",
        content: "Step six Content"
    },
    {
        element: "#step-seven",
        title: "Step seven Title",
        content: "Step seven Content"
    }
]);

tour.restart();

$("#pause-tour").on("click", function() {

    tour.end();

});


$("#resume-tour").on("click", function() {

    tour.start(true);

});
</script>

PAGE.CSHTML

代码语言：javascript
运行
复制
@{

}

<!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>


           <hr>

<h2 class="step-handle" id="step-five" style="float: left">We're Big Show Offs</h2>

          <hr>

<h2 class="step-handle" id="step-six" style="float: left">We're Big Show Offs</h2>

    </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", 
        title: "Step One Title", 
        content: "Step One Content" 
    },
    {
        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"
    },
        {
        element: "#step-five",
        title: "Step five Title",
        content: "Step five Content"
    },
    {
        path: "/index.cshtml",
        element: "#step-six",
        title: "Step six Title",
        content: "Step six Content"
    },
    {
        element: "#step-seven",
        title: "Step seven Title",
        content: "Step seven Content"
    }
]);

tour.restart();

$("#pause-tour").on("click", function() {

    tour.end();

});


$("#resume-tour").on("click", function() {

    tour.start(true);

});
</script>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/18815055

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档