`
蔡尧东
  • 浏览: 32693 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

simple test for toggle div bar

浏览器HTML 
阅读更多 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>toggle div</title>

<script language="JavaScript" type="text/javascript">

window.onload = init;
function init()
{
      document.getElementById('dropper1').style.display = 'block';
      document.getElementById('dropper2').style.display = 'none';
     
}
function toggleDiv(element)
{
   var otherId = element == "dropper1" ? "dropper2" : "dropper1";
    	document.getElementById(otherId).style.display = 'none';
      document.getElementById(element).style.display = 'block';
      
   }
</script>

</head>
<body>
	<table>
		<tr>
			<td onClick="toggleDiv('dropper1');">1</td>
			<td onClick="toggleDiv('dropper2');">2</td>
		</tr>
	</table>
      

      <div id="dropper1">
            <ul>
                 <li>1</li>
                
            </ul>
      </div>
       <div id="dropper2">
            <ul>
                
                 <li>2</li>
            </ul>
      </div>
</body>
</html>
分享到：
| 非ASCII码,汉字的判断
评论
2 楼 蔡尧东 2011-03-25  
调用document.getElementById("xxx")时最好放在window.onload事件函数中.
document.getElementById("xxx")有时候无法执行，就是因为xxx还没有载入，所以无法让浏览器得到该对象
1 楼 蔡尧东 2011-03-25  
display:none和visible:hidden都是把网页上某个元素隐藏起来的功能，但两者有所区别，经过亲自实验，我发现使用visible:hidden属性会使对象不可见，但该对象在网页所占的空间没有改变（看不见但摸得到），等于留出了一块空白区域，而display:none属性会使这个对象彻底消失（看不见也摸不到）
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics