javascript - 为什么我的 javascript var 值不断重置？

Question

我的导航有 3 个链接。

当我单击每个链接时，我希望它隐藏其他元素并显示自身。

在我点击我的链接后，它会执行它应该执行的操作，但几秒钟后它会重置并显示所有内容。

这里是代码笔的链接，以便您可以看到正在发生的事情。

https://codepen.io/necapereca/pen/zRwZbz

function show(choice){
  var user=choice;

  if ( user == 1) {
        document.getElementById('one').style = "display:block";
        document.getElementById('two').style ="display:none";
        document.getElementById('three').style ="display:none";
      }

      else if ( user == 2) {
        document.getElementById('one').style = "display:none";
        document.getElementById('two').style ="display:block";
        document.getElementById('three').style ="display:none";
      }

      else if ( user == 3) {
        document.getElementById('one').style = "display:none";
        document.getElementById('two').style ="display:none";
        document.getElementById('three').style ="display:block";
      }    
}

Answer 1

您的变量没有重置，实际上页面正在重新加载。您可以通过多种不同的方式来避免这种情况:

event.preventDefault()

通过event全局变量到您的单击函数并调用 event.preventDefault() ，这将停止单击 a 的默认行为链接。

function show(event, choice){
  event.preventDefault();
  var user=choice;
  
  if ( user == 1) {
        document.getElementById('one').style = "display:block";
        document.getElementById('two').style ="display:none";
        document.getElementById('three').style ="display:none";
      }
  
      else if ( user == 2) {
        document.getElementById('one').style = "display:none";
        document.getElementById('two').style ="display:block";
        document.getElementById('three').style ="display:none";
      }
  
      else if ( user == 3) {
        document.getElementById('one').style = "display:none";
        document.getElementById('two').style ="display:none";
        document.getElementById('three').style ="display:block";
      }    
}

.div1{
  background-color:red;
  width: 150px;
  height: 100px;
}
.div2{
  background-color:blue;
  width: 150px;
  height: 100px;
}
.div3{
  background-color:green;
  width: 150px;
  height: 100px;
}

<a class="nav-link" href="" onclick="show(event, 1)">HOME</a>
<a class="nav-link" href="" onclick="show(event, 2)">ABOUT ME</a>       
<a class="nav-link" href="" onclick="show(event,3)">CONTACT</a>
<div class="div1" id="one"></div>
<div class="div2" id="two"></div>
<div class="div3" id="three"></div>

在您的a上添加#hash链接标签

这将导航至#one但它不会重新加载页面。

<a href="#one">

更改您的 a标记到 button标签

默认情况下，按钮不会离开页面。