添加鏈接以切換到下一個選項卡

Question

請回答一個非常簡單的問題：如何在底部添加一個名為“下一個”的按鈕以切換到下一個選項卡，而不必轉到頁面頂部並單擊下一個選項卡？

實際上，我正在復制頁面頂部存在的選項卡的代碼，但無法正常工作。

    <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");
    });

我注意到的問題是，選項卡之間的切換功能僅工作一次。 這意味着如果我再次復制相同標簽的代碼將無法正常工作。

您能幫我解決這個問題嗎？

提前致謝。

Answer 1

正如您在javascript看到的那樣，當您單擊選項卡時，將在后台進行操作以向您顯示其內容。

單擊選項卡時， visivel類selectionada添加到您的選項卡中，並將類visivel添加到您的內容中以進行顯示。

如果您要使用按鈕，那么visivel難過，那么您將需要一些其他的javascript ，這些javascript必須將class selectionada添加到選項卡中，並將visivel到要顯示的內容中。

此外，該按鈕還必須知道當前打開的（ selectionada ）選項卡是哪個，以便打開下一個選項卡。 同樣，如果您使用“ Next按鈕，在我看來，您還需要“ Previous按鈕。

我不知道您的編程技能，但是此過程需要一些邏輯才能完成。 如果您對javascript和jquery有信心，則可以稍作努力。

無論如何，現在您知道為什么在執行操作時僅使用按鈕是行不通的。