simple test for toggle div bar

最新推荐文章于 2022-06-19 16:48:30 发布

原创最新推荐文章于 2022-06-19 16:48:30 发布 · 117 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #HTML

本文介绍了一个简单的JavaScript功能，用于在两个不同的Div元素之间进行显示和隐藏的切换。通过点击表格中的1或2，可以实现对应Div的显示而另一个隐藏。此功能基于HTML和JavaScript实现，适用于网页前端开发。

<!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>