[TOC] > [参考网址](https://introjs.com/) ## 引入 ``` <link href="../../introjs.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/intro.min.js"></script> ``` ## 简单demo `data-step`设置步骤,` data-intro`设置提示内容 ``` <a href='http://google.com/' data-step="2" data-intro='Hello step one!'>第一步</a> <a href="#">不会被点击</a> <a href='http://google.com/' data-step="1" data-intro= data-introaass'>第一步</a> <script> introJs().start() </script> ``` ## 使用js 设置 ``` introJs().setOptions({ steps:[ { element:document.querySelector("[data-step='1']"), intro:" hello <img style='box-shadow: 1px 1px 15px 1px rgba(0,0,0);' src='__PUBLIC__/Admin/img/guide_pc.gif' alt=''> <hr/>", }, { element:document.querySelector("[data-step='2']"), intro:" <img style='box-shadow: 1px 1px 15px 1px rgba(0,0,0);' src='__PUBLIC__/Admin/img/guide_mobi.gif' alt=''> <hr/>", }], nextLabel:"→", prevLabel:"←", doneLabel:"完成", skipLabel:"跳过", }).start().onbeforeexit(function () { //点击遮罩退出 //code //return false; //false 不退出 }).oncomplete(function(){ //code }); ```