首页 > 知识库 > 正文

html怎么设计,左侧是菜单栏,点击不同的菜单选项在右侧出现相应的内容?

1、首先在2113电脑中打开Dreamweaver,然后在网页设计中点5261击编辑按钮,就可以下拉。2、然后点4102击这个二级菜单代码1653折叠。3、接下来在这里就可以使用各种折叠的命令了,同样还能使用他的快捷键按钮。4、或者在代码这里还可以直接点击。5、这时候就可以看到代码后面这样省略的显示,代码就被折叠起来了,<div style="width:630px;float:left;height:500px;"><div style="float:left;height:500px;width:150px;"> <ul style="padding:0px;margin:0ox;"> <li id="LI0" style="float:left;background:#ccc;margin-top:5px;width:140px;"><a href="#" onclick="document.getElementById('cont0').style.display='block';document.getElementById('cont1').style.display='none'">第一个2113内容52614102</a></li> <li id="LI1" style="float:left;background:#ccc;margin-top:5px;width:140px;"><a href="#" onclick="document.getElementById('cont1').style.display='block';document.getElementById('cont0').style.display='none'">第二1653个内容</a></li> </ul></div><div style="float:left;width:430px;background:#eee;height:500px;"><div id="cont0" style="float:left;width:430px;height:500px;float:left;display:none"> 第一个内容 第一个内容 第一个内容 第一个内容 第一个内容 第一个内容 第一个内容 </div><div id="cont1" style="float:left;width:430px;height:500px;float:left;display:none"> 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容 第二个内容</div></div><div> 刚写的 没测试,看下吧 应该可以是用的脚本控制 可以优化一下 临时写 也就没怎么优化本回答被提问者采纳,如果按你说的话,那就要2113用JavaScript了,在右侧的单元格里面5261设置多个div,没一个标4102题对于一个div,然后当单击左面的1653标题的时候把右面的对应div设置成显示的,其他的设置成隐藏的就行了,我用写一段代码,你试试<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title><script type="text/javascript">function funcShow(id){for(var i=0;i<5;i++){var divInfo =document.getElementById('div'+(i+1));divInfo.style.display='none';}var div =document.getElementById('div'+id);div.style.display='block';}</script></head><body><table width="632" border="1"><tr><td width="66"><a href="javascript:funcShow(1)">1 </a></td><td width="550" colspan="4" rowspan="5"><div id="div1" style="display:block">此处显示id "div1" 的内容</div> <div id="div2" style="display:none">此处显示id "div2" 的内容</div><div id="div3" style="display:none">此处显示id "div3" 的内容</div><div id="div4" style="display:none">此处显示id "div4" 的内容</div><div id="div5" style="display:none">此处显示id "div5" 的内容</div></td></tr><tr><td><a href="javascript:funcShow(2)">2 </a></td></tr><tr><td><a href="javascript:funcShow(3)">3 </a></td></tr><tr><td><a href="javascript:funcShow(4)">4 </a></td></tr><tr><td><a href="javascript:funcShow(5)">5 </a></td></tr></table></body></html>或者还有一种方法是框架用Dreamweaver中在窗口中有个窗口菜单,里面有个框架,把它占出来。它会出现在侧边栏里面,然后你点击这一栏里面的三横一个下三角的地方,里面会有一些选项,里面就有一个帮助。是关于框架的用法,用Dreamweaver中在窗口中2113有个窗口菜单,里面5261有个框架,把它占出来。它会出现在侧边4102栏里面,然后你点击这一栏里面的三1653横一个下三角的地方,里面会有一些选项,里面就有一个帮助。是关于框架的用法。你参照那个就会看懂的,不是很难的。希望你能满意,框架!!和伪框架都能做!!要写几个页面您可 以先学习一下这个再写吧!!这个不是一句话就能说清的!!!www.shufadashi.com防采集。

大致思路左侧:菜单,给每个菜单设置id和onclick点击事件,onclick事件触发的函数假设写为display()右侧:写个固定样式的div,id假设设置为board。如果你的菜单内容在服务器display()的实现如下function display(){ $.ajax({ type: "POST", url: 菜单所请求的内容地址, data: this.id等等相关的请求标志, success: funtion(data){$('board').html(data)},//返回数据填充 dataType: dataType});}如果菜单内容写死在页面内那么右侧:写和菜单数一样多的div,把所有的display属性设置为none同时display()的实现如下function display(){ $('#'+$(this).attr('rel')).style.display='block';}以上,伪代码,仅供参考

function $(v){return document.getElementById(v);}var x=0;function c(y){$("a"+x).style.display = "none";$("a"+y).style.display = "";x=y}菜单一菜单二这里是文字这里是图片,自己写上左侧右侧布局我没给你写,只写了图片、文字切换功能。

大致思路左侧:菜单2113,给每个菜单设置id和onclick点击事件,5261onclick事件触发的函数假设写为display()右侧:4102写个固定样式的div,id假设设1653置为board。如果你的菜单内容在服务器display()的实现如下function display(){    $.ajax({    type: "POST",    url: 菜单所请求的内容地址,    data: this.id等等相关的请求标志,    success: funtion(data){$('board').html(data)},//返回数据填充    dataType: dataType});}如果菜单内容写死在页面内那么右侧:写和菜单数一样多的div,把所有的display属性设置为none同时display()的实现如下function display(){    $('#'+$(this).attr('rel')).style.display='block';}以上,伪代码,仅供参考本回答被网友采纳,使用JS脚本代码,具体的话可以上阿里西西查看一些js特效,感觉还不错,发个做好的例子给你参考,用frame框架实现一下就行了吧,用框架灰常简单咯,当然也可以用js控制一下内容来自www.shufadashi.com请勿采集。

声明:本网内容旨在传播知识仅供参考,不代表本网赞同其观点,文字及图片版权归原网站所有。

你可能还关注
热门推荐
今日推荐 更多