Question

我已经使用过本教程来创建指南 http://www.hongkiat.com/blog/introjs-step-by-step-guide-tutorial/

$(function(){
  var introguide = introJs();
  // var startbtn   = $('#startdemotour');
}

introguide.setOptions({
    steps: [
        {
          element: '.nav-bar',
          intro: 'This guided tour will explain the Hongkiat demo page interface.<br><br>Use the arrow keys for navigation or hit ESC to exit the tour immediately.',
          position: 'bottom'
        },
        {
          element: '.nav-logo',
          intro: 'Click this main logo to view a list of all Hongkiat demos.',
          position: 'bottom'
        },
        {
          element: '.nav-title',
          intro: 'Hover over each title to display a longer description.',
          position: 'bottom'
        },
        {
          element: '.readtutorial a',
          intro: 'Click this orange button to view the tutorial article in a new tab.',
          position: 'right'
        },
        {
          element: '.nav-menu',
          intro: "Each demo will link to the previous & next entries.",
          position: 'bottom'
        }
    ]
});

但我找不到办法或者我不理解:) 如何使用按钮或链接触发introJs。此外，我还在互联网用户指南中搜索但我没有找到关于这个问题的足够信息:(

我试过了：

<a href = "javascript: void (0);" onclick = "javascript: introJs (). start ();"> Show me how </a>

＆安培;

<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="startIntro();">Show me how</a>

但没有任何反应

请帮帮我

Answer 1

示例就在您的教程页面上：

var startbtn   = $('#startdemotour'); // <-- you need to uncomment this line, or just use $('#startdemotour').on()
startbtn.on('click', function(e){
  e.preventDefault();
  introguide.start();
  $(this).hide();
});

触发introJs使用按钮或链接

1 个答案: