Question

我正在使用intro.js创建一个站点之旅，但我需要根据tootip动态添加next / prev按钮。

示例：我想在我的第三个工具提示上有下一个/上一个按钮，但不是我的第一个和第二个。原因是我试图通过点击网站上的按钮而不是工具提示中的下一个按钮来帮助用户浏览网站，以提供更具互动性的游览。这是我的代码：

        want_tour.click(function() {
                    var introguide = introJs();
                    introguide.setOptions({
                          showStepNumbers: false,
                          showBullets: false,
                          showButtons: false,
                          scrollToElement: true,
                          exitOnEsc: true,
                          exitOnOverlayClick: false,
                          steps: [
                                {
                                      element: '#postcodeEntry',
                                      intro: 'Enter Postcode',
                                      position: 'bottom'
                                },
                                {
                                      element: '.home_Intro_Main',
                                      intro: 'Register or Start Shopping',
                                      position: 'bottom'
                                },
                                {
                                      element: '#searchform ',
                                      intro: 'Search',
                                      position: 'bottom'
                                },
                                {
                                      element: '.mainNavigation ',
                                      intro: 'Categories',
                                      position: 'bottom'
                                }
                          ]
                    }); 
                    introguide.start();
                    $('.chk-my-postcode').click(function() {
                          console.log("Clicked: .chk-my-postcode");
                          want_tour.hide();
                          introguide.goToStep(1).start();
                    });
                    $('#startShoppingWeDeliver').click(function() {
                          console.log("Clicked: #startShoppingWeDeliver");
                          introguide.setOption("skipLabel", "ExitOption");
                          introguide.setOptions({ skipLabel: 'ExitOptions', showButtons: true});
                          introguide.goToStep(2).start();
                    }); 
              });

目前，skipLabel标签使用setOption（）或setOptions（）更改其文本，但所需的showButtons未设置为false。

你可以告诉我怎么做吗？

Answer 1

禁用introjs的类现在在第一步中添加到“上一个”按钮，在最后一步中添加到“下一个”按钮。我真的只是想将它们隐藏起来，所以我在CSS中添加了以下内容。 of！完成！

.introjs-disabled {
     display: none !important;
}

Answer 2

@Adam Krakow，这是禁用CSS的坏习惯。

如果IntroJS onKeypress处于活动状态，则用户只能按“ Enter”键，否则将进入下一步。

如何从intro.js工具提示中动态添加或删除next / prev按钮

2 个答案: