菜单展示效果，紧急―――――― _JavaScript

菜单展示效果求助，紧急――――――

如上图，上面的是一级菜单，点击后左侧出现相应二级菜单，这个怎么实现的，或者这种效果叫什么名字？

------解决方案--------------------
div隐藏点击后显示光看你那张图看不出要什么效果啊
------解决方案--------------------

引用:

Quote: 引用:

div隐藏点击后显示  光看你那张图看不出要什么效果啊
  就是最上面的横排是一级菜单，点某个一级菜单对应二级菜单在左侧显示。
    如果一次性把所有菜单都加载出来，那么每个二级菜单对应的二级菜单都先放到各自div？那布局会不会很乱，好像div即便隐藏好像也是占用空间的吧。前台方面我是小白了，能否详细点

布局不会乱~~啥叫div占用空间？
------解决方案--------------------
你菜单里面的内容是静态的话你就放到div里面，二级菜单全部隐藏起来，点击一级菜单显示相应的二级菜单就可以了
------解决方案--------------------

引用:

Quote: 引用:

div隐藏点击后显示  光看你那张图看不出要什么效果啊
  就是最上面的横排是一级菜单，点某个一级菜单对应二级菜单在左侧显示。
    如果一次性把所有菜单都加载出来，那么每个二级菜单对应的二级菜单都先放到各自div？那布局会不会很乱，好像div即便隐藏好像也是占用空间的吧。前台方面我是小白了，能否详细点

不会乱啊，乱什么，display:none是不占用空间的

<div><a href="javascript:show('yyzx')">应用中心</a>　<a href="javascript:show('zhzx')">账号中心</a>　<a href="javascript:show('jygl')">交易管理</a></div>

<div id="dvMenu">

<div id="yyzx">应用中心<br />应用中心<br />应用中心</div>

<div id="zhzx" style="display:none">账号中心<br />账号中心</div>

<div id="jygl" style="display:none">交易管理<br />交易管理</div>

</div>

<script>

    function show(id) {

        var divs = document.getElementById('dvMenu').getElementsByTagName('div');

        for (var i = 0; i < divs.length; i++) 

            divs[i].style.display = divs[i].id == id ? 'block' : 'none';

    }

</script>

------解决方案--------------------
这就是一种页面菜单框架啊。顶部一级菜单，左侧“应用中心”为二级菜单，“手机充值”为三级菜单。通常结构为：
<body>
<table>
<head>
<tr><td>顶部一级菜单相关代码</td></tr>
<tr><td><iframe id="left" src="left.html" /> </td></tr> 左侧菜单页面为left.html
<tr><td><iframe id="main" src="main.html" /> </td></tr> 右侧为主页面 main.html展示内容
</head>
</table>

在当前通过iframe.contentWindow.xxxshowMenu()的方式来调用iframe页面的方法来改变菜单显示。

左侧菜单你可使用jquery的组件就行了，都比较好搞。
------解决方案--------------------

<div><a href="javascript:show('yyzx')">应用中心</a>　<a href="javascript:show('zhzx')">账号中心</a>　<a href="javascript:show('jygl')">交易管理</a></div>

<div id="dvMenu">

<div id="yyzx">应用中心<br />应用中心<br />应用中心</div>

<div id="zhzx" style="display:none">账号中心<br />账号中心</div>

<div id="jygl" style="display:none">交易管理<br />交易管理</div>

</div>

<script>

    function show(id) {

        var divs = document.getElementById('dvMenu').getElementsByTagName('div');

        for (var i = 0; i < divs.length; i++) 

            divs[i].style.display = divs[i].id == id ? 'block' : 'none';

    }

</script>

根据版主大大的代码改进了下
楼主可以参考下
样式有点丑。。。

<script type="text/javascript" src="jquery-1.10.2.min.js" ></script>

		

		<script type="text/javascript">

			$(document).ready(function() {

				$("p[class='flip']").click(function()

				{

					$(this).next().slideToggle(500);

				});

			});

			

			function show(id) {

		      var divs = $("div[id='dvMenu'] div[class='flip']");

		      for (var i = 0; i < divs.length; i++) 

		          divs[i].style.display = divs[i].id == id ? 'block' : 'none';

		  }

		</script>

	

	

		<style type="text/css"> 

		div.panel,p.flip

		{

			margin:0px;

			padding:10px;

			text-align:center;

			background:#e5eecc;

			border:solid 1px #c3c3c3;

			height:15px;