为啥单击按钮时我的选项卡没有变化？

Posted 2023-03-05

【中文标题】为啥单击按钮时我的选项卡没有变化？

【英文标题】：Why does my tab don't change when clicking the button?为什么单击按钮时我的选项卡没有变化？

【发布时间】：2022-01-14 13:28:34

【问题描述】：

我正在开发一个新网站，它采用多步骤表单，其中所有步骤都在单独的 div 中。问题是：当我单击第一个按钮时，它显示第二页，但随后又返回到第一页。 这是我的 javascript 代码：

<script>
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab

function showTab(n) 
  // This function will display the specified tab of the form ...
  var x = document.getElementsByClassName("tab");
  x[n].style.display = "block";


function next(n) 
  // This function will figure out which tab to display
  var x = document.getElementsByClassName("tab"); 
  // Hide the current tab:
  x[currentTab].style.display = "none";
  // Increase or decrease the current tab by 1:
  currentTab = currentTab + n;
  // if you have reached the end of the form... :
  if (currentTab >= x.length) 
    //...the form gets submitted:
    document.getElementById("regForm").submit();
    return false;
  
  // Otherwise, display the correct tab:
  showTab(currentTab);



</script>

我的前两个 div 的 html/php 代码：

 <div class="tab">
    <div id="layout">
        <div class="main">
            <div class="logo">
                <img src="pictures/propcomp.png"/>
            </div>   
            <div class="text">
                <h3 class="blue">Olá!</h3> <br>
                <h3 class="grey">Seja bem vindo(a) à empresa número 1 na pesquisa Google nesse modelo de férias. Bem como já temos mais de 11.300 inscritos no nosso canal no YouTube.</h3>
                <h3 class="blue"><strong>Parabéns!</strong></h3>
                <h3 class="blue normal"><strong class="negrito">Você foi pré-selecionado pelos nossos Analistas de Férias de Alto Padrão </strong> para
                    participar de uma consultoria <strong class="negrito">gratuita e exclusiva</strong> de férias onde na mesma você
                    conhecerá um método de viajar mais e melhor com sua família. Contudo o seu
                    tempo para gente vale ouro, então vamos te presentear com um brinde para que
                    você participe da consultoria. Leia até o final se você quiser saber qual é o brinde!</h3> <br>
            </div>
            <div class="home">
                <a href="">
                <button class="btn btn-beleza" type="button" id="nextBtn" onclick="next(1)">
                 <label class="beleza">Beleza! Quero Participar!</label> 
                <img src="pictures/arrow.svg" />
                </button>
            </a>
            <div class="beneficio">
                <a href="" style="display: flex;"><img src="pictures/interrogacao.svg"/><h4 class="blue normal">Por que estou recebendo esse benefício?</h4></a> 
                
       </div>
            </div>
            <div class="footerimg">
                                 <img style="width:30px; height: 44.5px;"src="pictures/logopequeno.png"/>
                </div>
        </div>
    </div>
</div>

<div class="tab">
<div class="layout">
        <div class="main">
            <div class="text">
                <div class="uausorriso">
                    <h3 class="blue negrito">Uauuuuuuuu, você é demais!!</h3> 
                    <img src="pictures/sorriso.png"/>
                </div>
                <h3 class="grey normal">Te parabenizamos por priorizar suas férias e novas experiências. Aliás, tudo passa e o
                    que fica são os momentos que vivemos com as pessoas que amamos. Afinal, qual é
                    a história que você vai contar?</h3>
                <h3 class="blue normal">Para começar, qual é o seu nome?</h3>
            </div>
            <div class="">
              
                    <input class="inputfield" style="margin-left:32%;"type="text" id="nome" name="nome"><br>
                   
                    <div class="avancar">
                    <a href="">
                    <button class="btn" type="button" id="nextBtn" onclick="next(1)">
                     <h3>Avançar</h3> 
                    <img src="pictures/arrow.svg" />
                    </button>
                </a>
                </div> 
        </div>
    </div>
</div>

我把这个放到网上，你可以直观地看到：https://testedeferias.000webhostapp.com/

【问题讨论】：

一个建议：检查您的 HTML 是否有错误。一个好的编辑应该为你做到这一点。如果不使用validator.w3.org

【参考方案1】：

您正在使用anchor 选项卡，因此您的页面正在刷新。页面刷新，因此默认情况下第一个选项卡再次可见。尝试在此处删除 a 标签：

<a href="">
    <button class="btn btn-beleza" type="button" id="nextBtn" onclick="next(1)">
    <label class="beleza">Beleza! Quero Participar!</label> 
    <img src="pictures/arrow.svg" />
    </button>
</a>

预期：

<button class="btn btn-beleza" type="button" id="nextBtn" onclick="next(1)">
    <label class="beleza">Beleza! Quero Participar!</label> 
    <img src="pictures/arrow.svg" />
</button>

【讨论】：

救了我的命老兄，谢谢！！！