Javascript 引导程序教程-如何从目标页面返回？_Javascript_Twitter Bootstrap

Javascript 引导程序教程-如何从目标页面返回？

javascript twitter-bootstrap

Javascript 引导程序教程-如何从目标页面返回？,javascript,twitter-bootstrap,Javascript,Twitter Bootstrap,我正在玩Bootstrap Tour，我发现自己在浏览页面时被卡住了在我的教程中，第四步将用户从index.cshtml带到page.cshtml，这很好，但是教程框没有在page.cshtml中打开，因此我无法从目标页面导航回来在bootstraptour.com上的Bootstrap tour演示中，我无法识别javascript来打开page.cshtml中的tour弹出窗口或处理返回index.cshtml的操作。在Bootstraptour demo page.html中只有一个d

我正在玩Bootstrap Tour，我发现自己在浏览页面时被卡住了

在我的教程中，第四步将用户从index.cshtml带到page.cshtml，这很好，但是教程框没有在page.cshtml中打开，因此我无法从目标页面导航回来

在bootstraptour.com上的Bootstrap tour演示中，我无法识别javascript来打开page.cshtml中的tour弹出窗口或处理返回index.cshtml的操作。在Bootstraptour demo 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>

    @{

}

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

@{
}




步骤欢迎


步骤1


步骤2


步骤3


步骤4


步骤5


步骤6



暂停游览

继续旅游
var tour=新的tour({
afterSetState:函数（键、值）{
log（键、值、tour.getState（）、tour.getStep（））；
}
});
tour.addSteps([
{
元素：“#欢迎”，
标题：“欢迎”，
内容：“欢迎参加引导程序之旅”
},
{
元素：“#步骤一”//string（jQuery选择器）-应在其旁边显示步骤弹出框的html元素
标题：“第一步标题”//string-popover的标题
内容：“第一步内容”//string-popover的内容
},
{
元素：“#第二步”，
标题：“第二步标题”，
内容：“第二步内容”
},
{
要素：“#第三步”，
标题：“第三步标题”，
内容：“第三步内容”
},
{
路径：“/page.cshtml”，
元素：“#第四步”，
标题：“第四步标题”，
内容：“第四步内容”
},
{
路径：“/”，
标题：“第五步标题”，
内容：“第五步内容”
},
{
要素：“第六步”，
标题：“第六步标题”，
内容：“第六步内容”
}
]);
tour.restart（）；
$（“#暂停巡更”）。在（“单击”，函数（）上）{
tour.end（）；
});
$（“#继续巡演”）。在（“单击”，函数（）上）{
tour.start（true）；
});

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>

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

    @{

}

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

@{
}
这只是一个测试。
这里没什么可看的。继续前进

我发现了几个问题：

在

页面的标记中找不到为步骤四指定的元素（#步骤四
）


第五步没有定义元素
，我认为这是必需的，除非您将孤立
选项设置为true

如果您在page.html
中检查演示的源代码，则必须在page.cshtml
中包含所有的巡演代码，最后引用的脚本index.js
包含巡演实例
最后，我不确定这是否会有什么不同，但我认为您对tour.restart（）的调用和巡更开始（true）应该交换位置
在我再次查看了如何在我昨天回到的位置的教程中导航页面后：教程从index.cshtml更改为page.cshtml并返回，但只需单击一次即可-page.cshtml只是闪烁打开。巡更步骤弹出窗口不会在page.cshtml中打开，我们也不会停留在该页面上
所以，我想我应该在page.cshtml（第五步和第六步）和BINGO中添加另一个步骤
感谢kuala_dev的指点。工作代码如下：
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-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>   

@{

}

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


步骤2


步骤3


步骤4


步骤7



暂停游览

继续旅游
var tour=新的tour({
afterSetState:函数（键、值）{
log（键、值、tour.getState（）、tour.getStep（））；
}
});
tour.addSteps([
{
元素：“#欢迎”，
标题：“欢迎”，
内容：“欢迎参加引导程序之旅”
},
{
元素：“#第一步”，
标题：“第一步标题”，
内容：“第一步内容”
},
{
元素：“#第二步”，
标题：“第二步标题”，
内容：“第二步内容”
},
{
要素：“#第三步”，
标题：“第三步标题”，
内容：“第三步内容”
},
{
路径：“/page.cshtml”，
元素：“#第四步”，
标题：“第四步标题”，
内容：“第四步内容”
},
{
要素：“第五步”，
标题：“第五步标题”，
内容：“第五步内容”
},
{
路径：“/index.cshtml”，
要素：“第六步”，
标题：“第六步标题”，
内容：“第六步内容”
},
{
元素：“