帶DIV元素的簡單Javascript按鈕

Question

我試圖做到這一點，以便在按下按鈕時顯示相應的DIV元素。 一旦單擊一個按鈕，將有一行按鈕，div元素應顯示與按鈕相關的文本。

這是我到目前為止的內容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
  <style type="text/css">
#sidebar div {background-color: #78a809;display: block;padding: 5px;margin: 15px;text-align: center;text-decoration: none;-moz-border-radius: 5px;border-radius: 5px;border-top-width: 1px;border-right-width: 1px;border-bottom-width: 3px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-top-color: #74b807;border-right-color: #74b807;border-bottom-color: #74b807;border-left-color: #74b807;width:120px;font-family:Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;}#sidebar div:hover {background-color: #8ac403;border-bottom-width: 1px;margin-bottom:17px;}
</style>
</head>

<body>
<script type = "text/javascript">
function toggle(vals) {
var d1=document.getElementById("info_1");
var d2=document.getElementById("info_2");
var d3=document.getElementById("info_3");
var d4=document.getElementById("info_4");
var d5=document.getElementById("info_5");
var d6=document.getElementById("info_6");

if (vals=1) {d1.style.display ="block";d2.style.display ="none";d3.style.display ="none";d4.style.display ="none";d5.style.display ="none";d6.style.display ="none";}
if (vals=2) {d2.style.display ="block";d1.style.display ="none";d3.style.display ="none";d4.style.display ="none";d5.style.display ="none";d6.style.display ="none";}
if (vals=3) {d3.style.display ="block";d2.style.display ="none";d1.style.display ="none";d4.style.display ="none";d5.style.display ="none";d6.style.display ="none";}
if (vals=4) {d4.style.display ="block";d2.style.display ="none";d3.style.display ="none";d1.style.display ="none";d5.style.display ="none";d6.style.display ="none";}
if (vals=5) {d5.style.display ="block";d2.style.display ="none";d3.style.display ="none";d4.style.display ="none";d1.style.display ="none";d6.style.display ="none";}
if (vals=6) {d6.style.display ="block";d2.style.display ="none";d3.style.display ="none";d4.style.display ="none";d5.style.display ="none";d1.style.display ="none";}
}
</script>
<table width="490" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="162" valign="top" id="sidebar">
<div onClick="toggle('1');">Button 1</div>
<div onClick="toggle('2');">Button 2</div>
<div onClick="toggle('3')">Button 3</div>
<div onClick="toggle('4')">Button 4</div>
<div onClick="toggle('5')">Button 5</div>
<div onClick="toggle('6')">Button 6</div>
      </td>
  </tr>
</table>
<div id="info_1" style="display:block">Indo Text</div>
<div id="info_2" style="display:none">Indigo Text</div>
<div id="info_3" style="display:none">Bangkok House Text</div>
<div id="info_4" style="display:none">Mr D Text</div>
<div id="info_5" style="display:none">Emporium Text</div>
<div id="info_6" style="display:none">Pacifica Text</div>
</body>
</html>

為什么這不起作用？

謝謝你的幫助。

Answer 1

您將以下值發送到“切換”功能：

toggle('1'); // '1'

Javascript以字符串形式獲取此值，但是您不使用單引號（'）進行檢查。

但實際上是，您使用的是單個“等於”而不是兩個。 它必須看起來像：

if (vals == '6' ) { /* Do something */ }

如果僅使用one =，則該語句始終返回“ true”，因為變量“ vals”的值為“ 6”。 如果此操作成功（總是成功），則返回“ true”。

一般來說，對於簡單的任務來說，腳本看起來非常復雜。 您應該看看帶有內置函數（如toggle（），slidetoggle（），fadetoggle（）和其他現成的函數:-)的jQuery之類的庫）：在此處嘗試示例： http：// api .jquery.com / slideToggle /

帶DIV元素的簡單Javascript按鈕

問題描述

1 個解決方案

解決方案1
1 已采納 2013-03-30 00:03:30

帶DIV元素的簡單Javascript按鈕

問題描述

1 個解決方案

解決方案1 1 已采納 2013-03-30 00:03:30

解決方案1
1 已采納 2013-03-30 00:03:30