首先设计一个关于导航的层叠样式表如:
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;width:100%;}
div.bar{position:relative;height:42px;background:url(mainmenu.bg14_6x42.gif) repeat-x;}
#header div.tabbar{width:900px;}
#header .tabbar div.tabs{left:266px;position:absolute;top:41px;font-size:14px;font-weight:bold;}
#header .tabbar .tabs a{float:left;width: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;width:560px;height:31px;z-index:-1;}
#header .tabbar .bg .nw{float:left;width:80px;height:31px;background:transparent url(navleft2_80x31.gif) no-repeat;}
#header .tabbar .bg .cen{float:left;width:80px;height:31px;background:transparent url(navlcenter_80x31.gif) no-repeat;}
#header .tabbar .bg .ne{float:left;width: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;width:18px;}
#header{z-index:20;min-width: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>

用JS实现任意导航栏的调用的更多相关文章

  1. fullpage.js 结合固定导航栏—实现定位导航栏

    开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...

  2. 用sticky.js实现头部导航栏固定

    在页面中,如果页面长度过大,滑动页面时,头部导航栏则会跟着划走. 我的头部导航栏代码为: <div class="headbar"> <center class= ...

  3. 前端 ---- js 模拟百度导航栏滚动案例

    模拟百度导航栏滚动监听 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  4. JS如何实现导航栏的智能浮动

    <script language="javascript">     function smartFloat(obj) {         var obj = docu ...

  5. js 网站顶部导航栏

    (function(){ var map = { 'index' : 0, 'gift_code' : 1, 'base_info' : 1, 'band_phone': 1, 'unlink_pho ...

  6. 【2017-04-10】js来控制导航栏在滚动条拉到一定位置时显示

    <html> <head> <title>test</title> </head> <body> <div style=& ...

  7. JS写的二级导航栏(利用冒泡原理)

    今天给大家分享一种用JS写的导航栏,虽然我们工作中不会使用JS来做导航栏,为了练习我们用JS来做一个JS导航栏 这种方法要比其他方法代码量少很多,但是需要对事件冒泡有一定的理解,如果需要理解冒泡可以参 ...

  8. ionic3 动态设置tabs页面底部导航栏隐藏,并显示输入框添加评论

    1.先上原始效果图:                                        2.完成后效果                                2.实现思路: ion ...

  9. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

随机推荐

  1. MySQL 用户管理及权限管理

    MySQL 默认有个root用户,但是这个用户权限太大,一般只在管理数据库时候才用.如果在项目中要连接 MySQL 数据库,则建议新建一个权限较小的用户来连接. 在 MySQL 命令行模式下输入如下命 ...

  2. Android开发之Navigationdrawer导航抽屉功能的实现(源码分享)

    导航抽屉(navigationdrawer)是一个从屏幕左边滑入的面板,用于显示应用的主要导航项目.用户能够通过在屏幕左边缘滑入或者触摸操作栏的应用图标打开导航抽屉. 导航抽屉覆盖在内容之上,但不覆盖 ...

  3. java使用省略号代替多参数(参数类型... 参数名)

    J2SE 1.5提供了“Varargs”机制.借助这一机制,可以定义能和多个实参相匹配的形参.从而,可以用一种更简单的方式,来传递个数可变的实参.本文介绍这一机制的使用方法,以及这一机制与数组.泛型. ...

  4. [asp.net入门]利用ADO.NET处理数据的简单之处

    由于项目需要,要往数据库中导入一些历史数据,而这些历史数据都是线下人工记录的,所以有很多不规范的地方,比如:同一个公司的名称在不同的记录中可能相差那么几个字,而且每条数据不是每个字段都是完整的,等等诸 ...

  5. Mac下进行基于java服务端语言的微信公众号本地js-sdk调试的大致方法

    开发微信公众号应用调用js-sdk,需要先在微信公众号后台配置可信域名,之后从微信的入口地址重定向到改域名下的路径后便会返回code,之后可以拿到一系列需要的参数等等.那么本地开发,如果使用的是PHP ...

  6. 廖雪峰的python学习网址

    http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/00140737570055886 ...

  7. 转:好用 Eclipse插件收集与说明

    http://developer.51cto.com/art/201007/214478.htm

  8. leetcode第一刷_ Flatten Binary Tree to Linked List

    提示中说明了,改动后的链表相当于原树的前序遍历结果.前序遍历是根左右,因为要把转换后的左子树链接到根节点的右子树上,因此进入递归之后要先把节点的右子树保存下来,然后进入左子树,左子树转换后应该返回最后 ...

  9. mondrian4 kylin saiku 整合踩坑记录

    1 先说了版本: Mondrian 4 .kylin2.2 .saiku 3.15 2 saiku 3.15 使用的xml是基于 mondrian4 的schema的xml.判断是不是mondrian ...

  10. nginx学习笔记(四)-----日志切割脚本及定时任务

    一.日志切割脚本 #!/bin/sh #nginx目录 BASE_DIR=/usr/local/nginx #生成的日志 BASE_FILE_NAME=jonychen.access.log CURR ...