Question

非常简单的问题请问：如何在底部添加一个名为＆＃34; Next＆＃34;切换到下一个选项卡而不必到达页面顶部并单击下一个选项卡？

事实上，我正在复制页面顶部存在的标签代码，但它无效。

    <a id="aba_2" href="#aba_2">Next</a>

这是现有的HTML代码，您也可以在此处找到https://codepen.io/DiogoAlvaro/pen/wWzNEm：

    <ul id="abas" class="teste">
      <li class="selecionada"><a id="aba_1" href="#aba_1">Aba 1</a></li>
      <li><a id="aba_2" href="#aba_2">Aba 2</a></li>
      <li><a id="aba_3" href="#aba_3">Aba 3</a></li>
    </ul>
    <div id="conteudos">
      <div id="conteudo_1" class="conteudo visivel">
        <p>Conteúdo da Aba 1</p>
      </div>
      <div id="conteudo_2" class="conteudo">
        <p>Conteúdo da Aba 2</p>
      </div>
    </div>

javascript代码为：

    var abas = document.getElementById("abas");
    var conteudos = document.getElementById("conteudos");

    function limparSelecao(){
      abas.getElementsByClassName("selecionada")[0].classList.remove("selecionada");
      conteudos.getElementsByClassName("visivel")[0].classList.remove("visivel");
    }

    abas.addEventListener("click", function(event){
      var abaClicada = event.target.id;
      var itemSelecionado = abaClicada.substring(abaClicada.lastIndexOf("_"));

      limparSelecao();

      event.target.parentElement.classList.add("selecionada");
      conteudos.querySelector("#conteudo"+ itemSelecionado).classList.add("visivel");
    });

我注意到的问题是标签之间的切换功能只能运行一次。这意味着如果我复制相同的标签＆＃39;编码另一次它不起作用。

请帮我解决这个问题吗？

提前致谢。

Answer 1

正如您在javascript中看到的，当您点击标签时，系统会在后台完成操作，以便向您展示其内容。

点击标签后，课程selectionada会添加到您的标签中，同时课程visivel也会添加到您的内容中以便展示。

如果您想要使用按钮，那么您会感到很难过需要一些额外的javascript，其中必须将类selectionada添加到标签页，将visivel类添加到内容中想要展示。

此外，按钮必须知道当前打开（selectionada）选项卡是为了打开下一个选项卡。此外，如果您使用Next按钮，我认为您还需要一个Previous按钮。

我不了解您的编程技巧，但这个过程需要一些逻辑才能完成。如果您对javascript和jquery有信心，可以稍微努力。

无论如何，你现在知道为什么只是按照你的方式使用按钮，将无法正常工作。

添加链接以切换到下一个选项卡

1 个答案: