zoukankan      html  css  js  c++  java
  • 点击导航栏,实现下方内容改变

      经常看到网页当中,上方一个导航栏,下面有内容,点击导航栏菜单,就可以改变下方的内容,今天查了查实现方法,本人用的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>
  • 相关阅读:
    jquery validate常用方法及注意问题
    jQuery Validate
    $('div','li') 和 $('div , li') 和 $('div li') 区别
    HTML中Div、span、label标签的区别
    Java中访问修饰符public、private、protecte、default
    shiro过滤器过滤属性含义
    (转载)常用Git命令清单
    Git-简明指南
    菜鸟程序员怎么才能提高自己的技术--(献给自己共勉)
    Visiual Studio CLR20r3问题
  • 原文地址:https://www.cnblogs.com/diyunfei/p/6675554.html
Copyright © 2011-2022 走看看