html文件，实现上方导航和左侧边栏不变，而右侧边栏信息变换？是用框架吗
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html文件，实现上方导航和左侧边栏不变，而右侧边栏信息变换？是用框架吗相关的知识，希望对你有一定的参考价值。
html文件，实现上方导航和左侧边栏不变，而右侧边栏信息变换？是用框架吗
导航是js做的，左侧是图片链接等，右侧是文字、图片及链接
具体有实例可以给我参见下吗1121152483@qq.com
1.建立主页面，就是你打开就能看到的页面
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页标题</title>
</head>
<frameset rows="16%,84%"border="0">
<frame noresize src="top.htm" scrolling="no">
<frameset cols="25%,*" >
<frame scrolling="no" noresize src="left.htm">
<frame name="rgt" src="right.htm">
</frameset>
</frameset>
<noframes></noframes>
</html>这里面top.htm就是上方导航，left.htm就是左侧信息，right.htm就是右侧信息
2.建立顶部页面top.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<table width=50% align=center>
<tr align=center>
<td width=50%><a target="rgt" href="right.htm">导航1</a></td>
<td width=50%><a target="rgt" href="right2.htm">导航2</a></td>
</tr>
</table>
</body>
</html>
这里要注意target="rgt"，rgt是我们在第一步里right.htm的name，也就是说点击这里，右边的内容会跳转到指定的页面，也就实现了右边信息的变换
这里我只写两个，你自己在导航里改，凡是有链接的你都加上target="rgt"
3.建立左部页面left.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<a href="right.htm" target="rgt">右部信息1</a>
<br><br>
<a href="right2.htm" target="rgt">右部信息2</a>
</body>
</html>
这里同样，凡是有链接的你都加上target="rgt"，点击后右边内容会随之变换
4.建立右部信息页面right.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<table>
<tr>
<td valign="top" width="500" height="1000">
<h3 align="center">右边信息</h3>
</td>
</tr>
</table>
</body>
</html>
这里是打开主页面后看到的右边部分的内容
5.建立右边部分等待切换的页面right2.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<table>
<tr>
<td valign="top" width="500" height="1000">
<h3 align="center">右边信息二</h3>
</td>
</tr>
</table>
</body>
</html>
注意这个right2.htm在top.htm和left.htm里都出现过
也就是说点击它们就会将右边内容切换到相应页面
我这里只做了两个，如果多的话就继续做right3.htm之类
OK完成本回答被提问者采纳 参考技术B 肯定是框架啊。例子 大网站的BBS一般都是这框架，看源码研究下
js实现菜单切换
小案例：实现菜单栏的切换，点击左侧边栏，展示右侧主体的页面
首先实现html页面的编写：
<div id="header"></div> <div id="main"> <!--左侧边栏--> <div class="affix"> <h4>用户中心</h4> <ul> <li><a href="#container-myorder">我的订单</a></li> <li><a href="#container-buy-stat-canvas">消费统计（Canvas版）</a></li> <li><a href="#container-buy-stat-svg">消费统计（SVG版）</a></li> <li><a href="#container-luck-lottery">幸运抽奖</a></li> </ul> </div> <!--右侧主体区域--> <div class="right-body"> <div class="active" id="container-myorder">我的订单</div> <div id="container-buy-stat-canvas">消费统计（Canvas）</div> <div id="container-buy-stat-svg">消费统计（SVG）</div> <div id="container-luck-lottery">幸运抽奖</div> </div> </div> <div id="footer"></div>
其次是css效果实现：
#main .affix { box-sizing: border-box; width: 210px; float: left; padding: 15px; } .affix h4 { font-size: 1.2em; margin: 10px 0; } .affix ul li{ padding: 5px 20px; } .affix ul li.active a{ color: #e4393c; font-weight: bold; } #main .right-body { box-sizing: border-box; margin-left: 210px; padding: 15px; } #main .right-body > div { display: none; min-height: 300px; } #main .right-body > div.active { display: block; }
最后一步运用简单的js实现点击左侧边栏选项，展示右侧主体区域：
$(‘.affix ul li a‘).click(function(e){ e.preventDefault(); //修改li的active的位置 $(this).parent().addClass(‘active‘).siblings(‘.active‘).removeClass(‘active‘); //修改右侧主体中的div的active的位置 var id = $(this).attr(‘href‘); $(id).addClass(‘active‘).siblings(‘.active‘).removeClass(‘active‘); });
综上一个简单的菜单切换就实现了。
以上是关于html文件，实现上方导航和左侧边栏不变，而右侧边栏信息变换？是用框架吗的主要内容，如果未能解决你的问题，请参考以下文章