使用Intro.js -数据介绍

Question

我目前正在为我的网站使用Intro.js，代码工作在这里

<h2 data-step="1" data-intro="Welcome message!">Welcome back</h2>

我想把这个音频播放按钮放在数据介绍标签中，我该怎么做呢？

<a onclick="this.firstChild.play()" ><audio src="Audio/WelcomeBack.wav"></audio>▸ </a>

我试过这样的事情

 <h2 data-step="1" data-intro="Welcome message! <a onclick="this.firstChild.play()" ><audio src="Audio/WelcomeBack.wav"></audio>▸ </a>">Welcome back</h2>

但它不读标签。

对不起，我还是个新手，这里需要帮助

Answer 1

为了完成这项工作，您必须使用使用JSON的编程定义。

例如：

    var intro = introJs();
      intro.setOptions({
        steps: [
          {
            element: '#step1',
            intro: "This is a <b>bold</b> tooltip."
          },
          {
            element: '#step2',
            intro: "Ok, <i>wasn't</i> that fun?",
            position: 'right'
          },
          {
            element: '#step3',
            intro: 'More features, more <span style="color: red;">f</span><span style="color: green;">u</span><span style="color: blue;">n</span>.',
            position: 'left'
          },
          {
            element: '#step4',
            intro: "<span style='font-family: Tahoma'>Another step with new font!</span>",
            position: 'bottom'
          },
          {
            element: '#step5',
            intro: '<strong>Get</strong> it, <strong>use</strong> it.'
          }
        ]
      });

      intro.start();

有关更多信息，请参见此示例：http://usablica.github.io/intro.js/example/html-tooltip/index.html