Question

我有一个简单的列表，我想在点击时触发Intro js，这是到目前为止我尝试过的。

这是我尝试过的introjs demo回购：

这是HTML 更新

   <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/js/intro.js"></script>
<script src="https://cdn.jsdelivr.net/npm/introjs@0.2.2/lib/index.min.js"></script>
<script src="/js/app.js"></script>
<link rel="stylesheet" href="/css/introjs.css">
<link rel="stylesheet" href="/css/style.css">

</head>
<ul class="aside__list">
   <li<a class="main-side" href="/aside/main.html">Main</a></li>
   <li><a  class="services"href="/aside/services.html">Services</a></li>
   <li><a  class="Clients" href="/aside/client.html">Clients</a></li> 
</ul>

  <div class="main" id="main">
    <h2>Main html</h2>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  </div>

这是JavaScript

$(function () {
    var introguide = introJs();
    document.querySelector('ul.aside__list li').addEventListener('click', doStuff);

        function doStuff(){
            introguide.setOptions({
                steps: [{
                    element: '#main',
                    intro: 'Welcome to create movie page , Let me guide you through its features.',
                    position: 'right'

                },
                {
                    element: '.main',
                    intro: 'Please select theme you would like to use for your videos',
                    position: 'right'
                }
                ]
            });
        }

      introguide.start();
});

我已将事件添加到列表的第一个元素

不幸的是，当我单击时什么也没有发生，但是当我删除introjs函数并放置alert('Trump is the greatest president ever') click事件时会触发警报功能并显示消息。

我的introjs函数怎么了？

使用onclick事件JavaScript触发Introjs

0 个答案: