导航菜单的实现

最新推荐文章于 2021-11-22 00:11:25 发布

3hahaha

最新推荐文章于 2021-11-22 00:11:25 发布

阅读量496

点赞数

文章标签：前端开发导航菜单

本文链接：https://blog.csdn.net/sanchuanhi/article/details/50682966

版权

最近看了几个很优秀的个人博客，觉得前端开发真的很酷。对这么漂亮的产品，真的很难抗拒。

也想开始学习前端开发。先从基本的开始吧。总结几种简单的导航菜单的实现：

1：用frameset

<html>
<frameset cols="120,*">
  <frame src="/example/html/html_contents.html">
  <frame src="/example/html/frame_a.html" name="showframe">
</frameset>
</html>

html_contents.html的内容为：

<html>
<body>
<a href ="/example/html/frame_a.html" target ="showframe">Frame a</a><br />
<a href ="/example/html/frame_b.html" target ="showframe">Frame b</a><br />
<a href ="/example/html/frame_c.html" target ="showframe">Frame c</a>
</body>
</html>

2. 用iframe做导航菜单

<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>
<body>
<table id="layoutTable" class="layoutTable" border="1">
<tr>
<td>
<div class="menu">
						<ol>
							<li class="liselected"><input type="hidden" value="a"/><span></span>page a</li>
							<li><input type="hidden" value="b"/><span></span>page b</li>
							<li><input type="hidden" value="c"/><span></span>page c</li>
						</ol>
					</div>
					</td>
	<td>	
	<iframe id="rightPage" src="./example/html/frame_a.html" style="border: 0;"
					scrolling="auto" width="100%" height="100%"> </iframe>

</td>
</tr>
</table>
<script type="text/javascript">
$(function(){
	$(".menu li").on("click",function(e){
		var selectVal = $(this).children("input")[0].value;
		var src = "./example/html/frame_"+selectVal+".html";
		$("#rightPage").attr("src",src);
	});
});
</script>
</body>
</html>