zoukankan      html  css  js  c++  java
  • 用JS实现任意导航栏的调用

    首先设计一个关于导航的层叠样式表如:
    body{font-size:12px;font-family:Arial,Helvetica,'宋体',sans-serif;color:#333;background:#fff;margin:0;}
    a:link{color:#0041D9;text-decoration:none;outline:none;}
    a:visited{color:#0041D9;text-decoration:none;outline:none;}
    a:hover{color:#f60;text-decoration:underline;outline:none;}
    a:active{color:#0041D9;text-decoration:none;outline:none;}
    #header{position:relative;100%;}
    div.bar{position:relative;height:42px;background:url(mainmenu.bg14_6x42.gif) repeat-x;}
    #header div.tabbar{900px;}
    #header .tabbar div.tabs{left:266px;position:absolute;top:41px;font-size:14px;font-weight:bold;}
    #header .tabbar .tabs a{float:left;80px;height:24px;line-height:24px;padding-top:7px;text-align:center;color:#000;font-weight:lighter;font-size:14px;background:transparent;}
    #header .tabbar .tabs a:hover{background:#fff url(nav_hover_80x31.gif) no-repeat;text-decoration:none;margin-left:-1px;padding-left:1px;}
    #header .tabbar .tabs a.actived{background:#fff url(nav_80x31.gif) no-repeat;font-weight:bold;color:#fff;margin-left:-1px;padding-left:1px;}
    #header .tabbar .tabs a.actived:hover{background:#fff url(nav_80x31.gif) no-repeat;font-weight:bold;color:#fff;text-decoration:underline;}
    #header .tabbar .bg{position:absolute;left:266px;top:41px;560px;height:31px;z-index:-1;}
    #header .tabbar .bg .nw{float:left;80px;height:31px;background:transparent url(navleft2_80x31.gif) no-repeat;}
    #header .tabbar .bg .cen{float:left;80px;height:31px;background:transparent url(navlcenter_80x31.gif) no-repeat;}
    #header .tabbar .bg .ne{float:left;80px;height:31px;background:transparent url(navright_80x31.gif) no-repeat;}
    #header .tabbar .float_icon{background:transparent url(new01_18x19.gif) no-repeat;font-size:0;height:19px;line-height:0;position:absolute;right:403px;text-indent:-999px;top:-4px;18px;}
    #header{z-index:20;min-970px;}
    #header div.banner{position:relative;height:72px;z-index:10;}
    div.bar{height:7px;background:url(mainmenu.bg11_6x7.gif) repeat-x;}
    然后设计一个导航JS
    document.writeln("<a href=1.htm>导航一</a>")
    document.writeln("<a href=1.htm>导航一</a>")
    document.writeln("<a href=1.htm>导航一</a>")
    document.writeln("<a href=1.htm>导航一</a>")
    将上面代码保存成一个.js文件,
    然后在HTML网页要显示导航的位置调用,
    <script src=xxx.js></script>
  • 相关阅读:
    Java系列学习(六)-数组
    MVC系列学习(十)-生成URL与表单
    Java系列学习(五)-流程控制语句
    Java系列学习(四)-运算计算
    asp.net mvc学习笔记
    Oracle网络传输的加密和完整性验证
    mvc学习
    linq 学习
    dapper学习入门
    entity framework 学习备忘录
  • 原文地址:https://www.cnblogs.com/huapox/p/3509826.html
Copyright © 2011-2022 走看看