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

Question

我有3个链接导航。

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

点击我的链接后，它会按照预期的方式执行操作，但会在几秒钟后重置并显示所有内容。

Heres链接到代码笔，以便您可以看到发生了什么。

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

你的var没有重置，实际上页面正在重新加载。你可以通过许多不同的方式避免这种情况：

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代码

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

Answer 2

您必须为您的href提供哈希值，否则您将导航到所述网址。如果没有提供网址，它将刷新当前正在发生的网址。 只需添加#(something)之类的内容即可。见下文 ！或使用按钮代替a代码

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

使用分叉笔https://codepen.io/wilomgfx/pen/vdmmKP

Answer 3

这是你的HTML。 href需要哈希：

<a class="nav-link" href="#" onclick="show(1)">HOME</a>

或者说：

  <a class="nav-link" href="javascript:void(0)" onclick="show(1)">HOME</a> 

但最好的办法是避免问题和use a stylised <button> tag instead：

var divs = ["one", "two", "three"];
divs.forEach(function(id){
    document.getElementById('btn-'+id).onclick = function() {
        show(id);
    };
});

function show(id){
    divs.forEach(function(id){
        document.getElementById(id).style = "display:none";
    });
                 
    document.getElementById(id).style = "display:block";
}

.div {
  width: 150px;
  height: 100px;
}

.div1 {  background-color:red; }
.div2 {  background-color:blue; }
.div3 {  background-color:green; }

button.link {
    display:inline-block;
    position:relative;
    background-color: transparent;
    cursor: pointer;
    border:0;
    padding:0;
    color:#00f;
    text-decoration:underline;
    font: inherit;
}

<button class="link" id="btn-one">HOME</button>
<button class="link" id="btn-two">ABOUT ME</button>       
<button class="link" id="btn-three">CONTACT</button>
<div class="div div1" id="one"></div>
<div class="div div2" id="two"></div>
<div class="div div3" id="three"></div>

运行代码段以查看其实际效果，此处为the code in an updated pen。

• 我用attach click events without jQuery的简单方法。
• 当您点击“链接”时，所有div都会被隐藏，然后会显示正确的div。
• 我还简化了CSS

Answer 4

这是因为您的链接上有href=""，因此会进行导航。其中一个解决方案是从您的函数中return false，并将HTML调整为onclick="return show.."。

查看完整的 HTML

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

和 Javascript

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

  return false;
}

另一种解决方案是简单地从您的链接中移除href=""，但您将失去他们的链接＆＃39;样式。

Answer 5

只需删除空的href或将其替换为href="#!" 这将阻止页面重新加载。

Answer 6

似乎show函数不是问题，而是你如何调用它。正确的方法是使用按钮：

<button onclick = "show(1)"> Show 1 </button>

然而，虽然修复很简单，但您可以通过循环遍历元素来大大减少代码。然后，如果元素索引与要显示的索引匹配，则可以显示它，否则可以隐藏它：

 function show(index){
   const ids = ["one", "two", "three"];

   for(let i = 0; i < ids.length; i++)
      document.getElementById(ids[i])
         .style.display = index - 1 === i ? "block" : "none";
}