html框架如何实现左边为导航栏,右边为连接页面,代码写出来

 我来答
游戏放松小助手
高粉答主

2020-05-10 · 我是游戏小达人,乐于助人
游戏放松小助手
采纳数:32 获赞数:76848

向TA提问 私信TA
展开全部

1、首先打开Deamweaver8,新建一网页文件,接着输入以下导航菜单的内容。

2、此时对应效果如图。

3、接下来准备相关的导航按钮图片(可以事先利用PS制作好)。

4、然后将以下CSS代码加入到<head></head>之间。

5、网页此时的效果如图,就完成了。

小星星教育知识分享
高粉答主

2020-05-23 · 用教师的智慧点燃学生的智慧火花
小星星教育知识分享
采纳数:202 获赞数:67129

向TA提问 私信TA
展开全部

<head>

<title>如何实现左边为导航栏点击后右边为连接页面</title>

<meta charset="gbk">

<script type="text/javascript">

function setTab(m,n){ 

var tli=document.getElementById("leftmenu"+m).getElementsByTagName("li"); 

var mli=document.getElementById("mcont"+m).getElementsByTagName("ul"); 

for(i=0;i<tli.length;i++){    tli[i].className=i==n?"hover":""; 

 mli[i].style.display=i==n?"block":"none"; }}

 </script>

<style type="text/css"> 

.aa{ width:120px; float:left;}    

.aa li{ padding:5px; background:#ff0000; cursor:pointer;border:1px solid;} 

.bb{ width:500px;height:200px; float:left; background:pink;}

.bb ul li{list-style:none;}

#leftmenu0{list-style:none;margin:0;}

</style>

</head>

<body>

<div class="aa">

<ul  id="leftmenu0">

<li class="hover" οnclick="setTab(0,0)">nav1</li>

<li οnclick="setTab(0,1)">nav2</li>

<li οnclick="setTab(0,2)">nav3</li>

<li οnclick="setTab(0,3)">nav4</li>

<li οnclick="setTab(0,4)">nav5</li>

</ul>

</div>

<div id="mcont0" class="bb">

<ul class="block" style="display: block">

<span>content1</span>

<li>你的内容</li></ul>

<ul class="block" style="display: none">content2</ul>

<ul class="block" style="display: none">content3</ul>

<ul class="block" style="display: none">content4</ul>

<ul class="block" style="display: none">content5</ul>

</div>

</body>

</html>

扩展资料

ifame实现左侧导航栏右侧内容

1、在jsp文件的<head>中加入:

<style>

html,body{margin:0px;height:100%;}

</style>

才能使页面中的<div>设置height:100%起作用。100%是根据其父布局来确定的,所以必须确定父布局的高度。

而width:100%则可自动布满整个页面。

2、<divid="main"style="width:100%;height:100%;">

<divid="left"style="float:left;width:200px;height:100%;">

<ahref="userlist.do"target="frame"><li>用户管理</li></a>

<ahref=""target="frame"><li>角色管理</li></a>

<ahref=""target="frame"><li>权限管理</li></a>

</div>

<divid="right"style="height:100%;width:auto;margin-left:200px;">

<iframeid="iframe"name="frame"scrolling="no"frameborder="0"height="100%"width="100%"></iframe>

</div>

</div>

float:left用于实现左右两个div并列。


更改iframe的src实现时,要注意是name属性,不是id属性。

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
hanpu1802
推荐于2017-09-11 · TA获得超过338个赞
知道小有建树答主
回答量:369
采纳率:0%
帮助的人:417万
展开全部
你直接运行就可以了::

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<script type="text/javascript">
function setTab(m,n){
var tli=document.getElementById("leftmenu"+m).getElementsByTagName("li");
var mli=document.getElementById("mcont"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
}</script>
<style type="text/css">
.aa{ width:200px; float:left;}
.aa li{ padding:5px; background:#ff0000; cursor:pointer;}
.bb{ width:700px; float:left; background:#00ff00;}
</style>
</head>
<body>
<div class="aa">
<ul id="leftmenu0">
<li class="hover" onclick="setTab(0,0)">操作流程</li>
<li onclick="setTab(0,1)">付款方式</li>
<li onclick="setTab(0,2)">免责声明</li>
<li onclick="setTab(0,3)">隐私声明</li>
</ul>
</div>
<div id="mcont0" class="bb">
<ul class="block" style="display: block">1111111111</ul>

<ul class="block" style="display: none">222222222</ul>

<ul class="block" style="display: none">333333333</ul>

<ul class="block" style="display: none">4444444444</ul>
</div>

</body>

</html>
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
qswwwqs
2011-03-10 · 超过32用户采纳过TA的回答
知道答主
回答量:166
采纳率:0%
帮助的人:97.4万
展开全部
<body>
<table>
<tr>
<td>
<a href="http://www.baidu.com" target="right">链接</a>
</td>

<td>
<iframe id="right"/>
</td>

</tr>
</table>
</body>
更多追问追答
追问
不打开一个新的链接,直接显示在框架的右边,左边有不同的导航栏,右面根据左面来显示不同的页面。
追答
那你JS方法更改右边的iframe 的src撒
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式