简单的Javascript按钮与DIV元素

我想让它如此，当按下按钮时显示相应的DIV元素。点击一行按钮后，div元素应显示与该按钮相关的文本。简单的Javascript按钮与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>

这是为什么不工作？

感谢您的任何帮助。

来源

2013-03-30 mme

Best提示：忘记ID的，使用通用的类和索引的目标元素。 – elclanrs

顺便说一下，你所有的if语句都是错误的。 'if（vals = 1）'总是成立的。你需要'=='。 – elclanrs

为什么要写这样的代码... – lifetimes

你下面的值发送到“切换”功能全：

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

的Javascript得到这个值作为一个字符串，但你选择了它没有一个单引号（'）。

但实质上是，你的使用一个“平等”而不是两个。它必须看起来像：

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

如果只是用一个=，语句返回总是“真”，因为变量“丘壑”得值“6”。如果此操作成功，总是成功，则返回“true”...

在generel中，对于简单的taks，脚本看起来很复杂。你应该看看像jQuery一样的内置函数，如toggle（），slidetoggle（），fadetoggle（）和其他现成的函数:-) ...试试这里的例子：http://api.jquery.com/slideToggle/

来源

2013-03-30 00:03:30

谢谢你，抱歉有这样一个简单的解决方案。下次会做更好的研究 – mme

简单的Javascript按钮与DIV元素

回答

相关问题