添加一個鏈接切換到下一個標籤

非常簡單的問題請問：如何在底部添加一個名爲「下一步」的按鈕來切換到下一個選項卡，而不必到達頁面頂部並單擊下一個標籤？添加一個鏈接切換到下一個標籤

實際上，我正在複製頁面頂部存在的選項卡代碼，但它不起作用。

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

我注意到的問題是切換功能標籤之間僅工作一次。這意味着如果我再次複製相同標籤的代碼，它將無法工作。

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

在此先感謝。

來源

2016-10-01 SoufCoder

正如您在javascript中看到的那樣，當您單擊某個標籤時，將在後臺完成所有操作，以便向您展示其內容。

單擊一個選項卡時，類selectionada將添加到您的選項卡，並且類visivel將添加到您的內容以顯示它。

因此，如果你想使用按鈕，那麼你會需要一些額外的javascript，它必須將類selectionada添加到選項卡和類visivel您想要顯示的內容。

此外，按鈕必須知道當前打開哪個（selectionada）選項卡才能打開下一個。此外，如果您使用Next按鈕，我認爲您還需要Previous按鈕。

我不知道你的編程技巧，但這個過程涉及到一些邏輯才能完成。如果您對javascript和jquery有信心，您可以通過一些小小的努力來做到這一點。

無論如何，你現在知道爲什麼只是使用一個按鈕，因爲你在做什麼，將無法正常工作。

來源

2016-10-01 12:38:45 Franco

添加一個鏈接切換到下一個標籤

回答

相關問題