导航菜单的实现

来源：互联网发布：淘宝店铺转让可信吗编辑：程序博客网时间：2024/05/17 09:39

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

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

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>

0 0