У меня есть простой список, который я хочу вызвать при щелчке интро, вот что я пробовал до сих пор.
Документы
Вот 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') событие щелчка, запускают функцию оповещения иотображает сообщение.
Что не так с моей функцией introjs?