点击导航栏，实现下方内容改变
Posted 24k24k
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击导航栏，实现下方内容改变相关的知识，希望对你有一定的参考价值。
经常看到网页当中，上方一个导航栏，下面有内容，点击导航栏菜单，就可以改变下方的内容，今天查了查实现方法，本人用的frameset+frame实现的，实现方法简单，容易理解。废话不多说，上代码：
Index.html
1 <html> 2 <head> 3 <title>index</title> 4 </head> 5 <frameset rows="25%,*" frameborder="1"> 6 <frame name="top" src="top.html"> 7 <frame name="botton" src="botton.html"> 8 </frameset> 9 </html>
说明：rows表示你要把网页上下分栏，cols表示左右分栏，rows后面"25%,*"有两项表示分成上下两栏，25%表示上栏占整个网页的25%，后面的*表示下栏占全部，如果第二个也出现分数，表示下栏占网页的百分比。这个rows当中只有两项，表示分两栏，3项表示分三栏，比如“25%，50%，25%”，以此类推。
frame标签表示分的栏数，和上面的rows里面的数量对应，分别给分的栏设置一个name，一般为top,botton,left,right,....src表示这一栏当中要显示的页面内容。
Top.html
1 <html> 2 <head> 3 <title>top</title> 4 </head> 5 <body> 6 <a href ="1.html" target="botton">1</a><br/> 7 <a href ="2.html" target="botton">2</a><br/> 8 </body> 9 </html>
top.html-------使用a标签的target属性，点击当前链接之后，要转向的栏的名称，使用botton，因为index。html当中，有name为botton的frame，所以表示点击1之后，会把1.html当中的内容显示到名称为botton的frame当中，由此实现了在上方top当中点击链接，在下方botton当中改变内容。
Botton.html
1 <html> 2 <head> 3 <title>botton</title> 4 </head> 5 <body> 6 show word. 7 </body> 8 </html>
1.html
1 <html> 2 <head> 3 <title>1</title> 4 </head> 5 <body> 6 1 7 </body> 8 </html>
2.html
1 <html> 2 <head> 3 <title>2</title> 4 </head> 5 <body> 6 2 7 </body> 8 </html>
以上是关于点击导航栏，实现下方内容改变的主要内容，如果未能解决你的问题，请参考以下文章