Question

我试图根据读者点击的菜单选项隐藏/显示我网站上的主要内容持有者。这对我来说似乎是一件简单的事情，我之前已多次完成，但现在它不会起作用。我的代码如下所示：

<!DOCTYPE html>
<html>
<head>
<title id="titel">Mercedes F1</title>
<link rel="stylesheet" href="mercedes.css">
<meta name="viewport" content="width=device-width; initial-scale=1">
<script>
function sidbyte(p){
var p;
if(p == 1) {
document.getElementById("forare").style.display = "block";
document.getElementById("mercedes").style.display = "none";
document.getElementById("statistik").style.display = "none";
}
else if(p == 2) {
document.getElementById("forare").style.display = "none";
document.getElementById("mercedes").style.display = "block";
document.getElementById("statistik").style.display = "none";
}
else if(p == 3) {
document.getElementById("forare").style.display = "none";
document.getElementById("mercedes").style.display = "none";
document.getElementById("statistik").style.display = "block";
}
}
</script>
</head>
<body>
<div class="page">
<nav>
<a href="" onclick="sidbyte(1)">Förarbiografi</a>
<img src="Media/Menu_icon.svg" class="menuicon" alt="MenuIcon">
<a href="" onclick="sidbyte(2)">Mercedes F1</a>
<img src="Media/Menu_icon.svg" class="menuicon" alt="MenuIcon">
<a href="" onclick="sidbyte(3)">Statistik</a>
</nav>
<div id="forare" class="main">
<h1 class="rubrik">Förare</h1>
<p>

</p>
</div>
<div id="mercedes" class="main">
<h1 class="rubrik">Mercedes F1 genom åren</h1>
<p>

</p>
</div>
<div id="statistik" class="main">
<h1 class="rubrik">Statistik</h1>
<p>

</p>
</div>
</div>
</body>
</html>

Answer 1

主要问题是，只要您点击 a 标记，页面就会重新加载。将＃ 放在 a 的 href 属性中标签。多数民众赞成。

<a href="#">Click Here</a>

jsFiddle

注意： 在您使用参数时，函数内部声明的本地 p 无用。因此，除非您使用此关键字引用该代码，否则如果您仅使用参数，则删除它会更好。像，

this.p // refers to the local p you declared.

Answer 2

每次触发操作时都会重新加载页面，因此会返回默认状态，这意味着不再应用转换。通过为<a>代码href或#提供javascript:void(0);，您可以阻止页面刷新。或者甚至更好，您实际上可以从href本身执行JS。

我实际上建议使用javascript:void(0);，因为默认情况下它不会跳转到页面顶部，而#会这样做。但是，该行为can be prevented只有一个简单的onclick="return false"。

Codepen

Answer 3

找到我使用jQuery做的下面的代码。它非常简短易懂。

HTML

<div class="page">
  <nav>
    <a class="one" href="#">Förarbiografi</a>
      <img src="Media/Menu_icon.svg" class="menuicon" alt="MenuIcon">
    <a class="two" href="#">Mercedes F1</a>
      <img src="Media/Menu_icon.svg" class="menuicon" alt="MenuIcon">
    <a class="three" href="#">Statistik</a>
  </nav>

  <div id="forare" class="main">
    <h1 class="rubrik">Förare</h1>
    <p>Content</p>
  </div>
  <div id="mercedes" class="main">
    <h1 class="rubrik">Mercedes F1 genom åren</h1>
    <p>Content</p>
  </div>
  <div id="statistik" class="main">
    <h1 class="rubrik">Statistik</h1>
    <p>Content</p>
  </div>
</div>

JS

$('.one').click(function(){
    $('.main').hide();
    $('#forare').show();
});
$('.two').click(function(){
    $('.main').hide();
    $('#mercedes').show();
});
$('.three').click(function(){
    $('.main').hide();
    $('#statistik').show();
});

CSS

.main{
    display:none;
}

<强> JS FIDDLE DEMO

为什么我的javascript代码隐藏/显示div-box不起作用？

3 个答案: