Foundation Joyride · W3School Foundation 教程

# Foundation Joyride Joyride 是一个功能向导的 JavaScript 效果，创建实例如下： ### 实例 ```  <h3 id="first">First stop!</h3> <h3 id="second">Second stop!</h3>  <ol class="joyride-list" data-joyride> <li data-id="first"> <p>First stop. The ride has begun!</p> </li> <li data-id="second"> <h4>Second Stop</h4> <p>Any valid HTML will work inside the Joyride.</p> </li> <li data-button="End"> <h4>End Stop</h4> <p>The tour is over. You can either go back to the previous stop or close it.</p> </li> </ol>  <script> $(document).ready(function() { $(document).foundation('joyride', 'start'); }) </script> ``` ### 实例解析以上实例中，我们创建了两个元素，每个元素都有独立的 ID。两个元素设置了 joyride 开始和结束的位置。我们在 `<ol>` 或 `<ul>` 元素上添加 `data-joyride` 属性和 `.joyride-list` 类来创建 joyride。你需要在文档头部定义它 (在 `<body>` 内的头部)。在每个列表上使用 `<li>` 元素，每个元素添加 `data-id="_value_"` 属性。属性的 _value_ 必须与之前元素的 id 相同。所以第一个功能导航 `<h3>` 元素使用 id="first" 必须与 <li> 元素的 data-id="first" 值一致。如果你没有管理停止的 id，将显示一个模态框。最后，Joyride 需要使用 JavaScript 初始化它，代码为： `$(document).foundation('joyride', 'start');`