為什么我的用於隱藏/顯示div框的JavaScript代碼不起作用？

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>標記提供#或javascript:void(0);的href javascript:void(0); ，可以防止頁面刷新。 甚至更好的是，您實際上可以從href本身執行JS。

我實際上建議使用javascript:void(0); ，因為默認情況下它不會跳到頁面頂部，而#會。 但是，可以通過簡單的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

為什么我的用於隱藏/顯示div框的JavaScript代碼不起作用？

問題描述

3 個解決方案

解決方案1
3 已采納 2015-01-13 10:04:02

解決方案2
0 2015-01-13 10:11:43

解決方案3
-2 2015-01-13 10:03:46

為什么我的用於隱藏/顯示div框的JavaScript代碼不起作用？

問題描述

3 個解決方案

解決方案1 3 已采納 2015-01-13 10:04:02

解決方案2 0 2015-01-13 10:11:43

解決方案3 -2 2015-01-13 10:03:46

解決方案1
3 已采納 2015-01-13 10:04:02

解決方案2
0 2015-01-13 10:11:43

解決方案3
-2 2015-01-13 10:03:46