html框架如何实现左边为导航栏,右边为连接页面,代码写出来
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html框架如何实现左边为导航栏,右边为连接页面,代码写出来相关的知识，希望对你有一定的参考价值。
1、首先打开Deamweaver8，新建一网页文件，接着输入以下导航菜单的内容。
2、此时对应效果如图。
3、接下来准备相关的导航按钮图片（可以事先利用PS制作好）。
4、然后将以下CSS代码加入到<head></head>之间。
5、网页此时的效果如图，就完成了。
<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 lilist-style:none;
#leftmenu0list-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,bodymargin: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属性。
参考技术B 你直接运行就可以了：：<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>本回答被提问者采纳 参考技术C <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撒
追问代码写出来，谢谢。
追答
链接
function change()
document.getElementById("right").src="http://www.baidu.com";
以上是关于html框架如何实现左边为导航栏,右边为连接页面,代码写出来的主要内容，如果未能解决你的问题，请参考以下文章