官方文檔

github

DEMO

// 引入introJs后introJs().goToStep(1).setOptions({prevLabel: "上一步",nextLabel: "下一步",skipLabel: "跳過",doneLabel: "結束", tooltipPosition: 'bottom', // 引導說明框相對高亮說明區域的位置 |tooltipClass: '', // 引導說明文本框的樣式highlightClass: '', // 說明高亮區域的樣式exitOnEsc: true, // 是否使用鍵盤Esc退出exitOnOverlayClick: true, // 是否允許點擊空白處退出showStepNumbers: true, // 是否顯示說明的數據步驟keyboardNavigation: true, // 是否允許鍵盤來操作showButtons: false, // 是否按鍵來操作showBullets: true, // 是否使用點點點顯示進度showProgress: false, // 是否顯示進度條scrollToElement: true, // 是否滑動到高亮的區域// overlayOpacity: 0.8, // 遮罩層的透明度positionPrecedence: ["bottom", "top", "right", "left"], // 當位置選擇自動的時候，位置排列的優先級disableInteraction: false, // 是否禁止與元素的相互關聯hintPosition: 'top-middle', // 默認提示位置hintButtonLabel: 'Got it' // 默認提示內容}).oncomplete(function () {// 點擊跳過按鈕后執行的事件}).onexit(function () {// 點擊結束按鈕后， 執行的事件}).start();

在html加入屬性? data-step 和 data-intro簡介?data-hint提示

<div data-step="1" data-intro="步驟1!"></div> <div data-step="2" data-intro="步驟2!"></div>

?

總結

以上是生活随笔為你收集整理的intro.js新手引导的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。