Question

很抱歉，如果发现问题很愚蠢，但我想知道如何实现简单的Linkedin HopScotch。

我试图实现，但没有成功完成它。

以下是我的简单实现尝试：

Html Part：

<h1 id="header">My First Hopscotch Tour</h1>
 <div id="content">
 <p>Content goes here...</p>
</div>
<button id="myBtn">Click Me</button>

<script>
   var tour = {
   id: "hello-hopscotch",
   steps: [
     {
        title: "My Header",
        content: "This is the header of my page.",
        target: "header",
        placement: "right"
     },

     ]
  };
  $("#myBtn").click(function(){
     hopscotch.startTour(tour);
  });
</script>

我应该根据游览对象添加id为“hello-hopscotch”的div吗？我也是“http://cdnjs.com/libraries/hopscotch”的图书馆。我实现了hopscotch.min.css和hopscotch.min.js。

我有什么需要做的吗？

Answer 1

实际上，您已将展示位置设置为“正确”，这很好，但它正在显示屏幕上的步骤。因为步骤显示在元素的右侧，恰好是一个块元素。将其切换到底部，您将看到该项目。

您可以根据文档配置展示位置。

Answer 2

正如我从上一天开始知道的那样，我已经开始使用这个插件，如果找不到你定位的元素，跳房子就不会渲染。如果您的目标是包含Id的元素，则只需使用“#”设置目标。

如何实施Linkedin Hopscotch？

2 个答案: