用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;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实现任意导航栏的调用的更多相关文章
- fullpage.js 结合固定导航栏—实现定位导航栏
开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...
- 用sticky.js实现头部导航栏固定
在页面中,如果页面长度过大,滑动页面时,头部导航栏则会跟着划走. 我的头部导航栏代码为: <div class="headbar"> <center class= ...
- 前端 ---- js 模拟百度导航栏滚动案例
模拟百度导航栏滚动监听 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- JS如何实现导航栏的智能浮动
<script language="javascript"> function smartFloat(obj) { var obj = docu ...
- js 网站顶部导航栏
(function(){ var map = { 'index' : 0, 'gift_code' : 1, 'base_info' : 1, 'band_phone': 1, 'unlink_pho ...
- 【2017-04-10】js来控制导航栏在滚动条拉到一定位置时显示
<html> <head> <title>test</title> </head> <body> <div style=& ...
- JS写的二级导航栏(利用冒泡原理)
今天给大家分享一种用JS写的导航栏,虽然我们工作中不会使用JS来做导航栏,为了练习我们用JS来做一个JS导航栏 这种方法要比其他方法代码量少很多,但是需要对事件冒泡有一定的理解,如果需要理解冒泡可以参 ...
- ionic3 动态设置tabs页面底部导航栏隐藏,并显示输入框添加评论
1.先上原始效果图: 2.完成后效果 2.实现思路: ion ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
随机推荐
- Unity3d通用工具类之数据配置加载类-ini配置文件加载
Unity3d通用工具类之数据配置加载类-ini配置文件加载 上次我们讲过xml文件的加载配置管理,今天我们换个配置文件,也是比较常见的配置文件.ini格式的数据. 按照国际管理先贴一张啥是.ini文 ...
- 《趣学Python编程》
<趣学Python编程> 基本信息 作者: (美)Jason Briggs 译者: 尹哲 出版社:人民邮电出版社 ISBN:9787115335951 上架时间:2014-2-21 出版日 ...
- C语言:自定义一个查找字串的功能函数,类似于<string.h>中的strstr()
//自定义一个字符串字串查找标准库函数strstr() #include<stdio.h> #include<string.h> char* myStrstr(char *st ...
- mini-parser
https://leetcode.com/problems/mini-parser/ /** * // This is the interface that allows for creating n ...
- dp 密度 分辨率 屏幕 状态栏 标题栏 适配
一篇总结的非常完善的博文:http://www.jianshu.com/p/ec5a1a30694b 屏幕像素参数相关信息表格 屏幕级别 像素密度 每英寸像素数 通常分辨率 分辨率别称 默认 ...
- android 地址控件概述
最近,公司做项目,需要一个地址控件,本来是想androidcopy开源的android的地址控件,但是了,找来找去.都没有找到一个真正满足我的需求的,普通的地址控件只是精确到市县区三级,但是我们的需求 ...
- xshell实现端口转发
跳板机:10.127.10.1 目标机:10.127.4.25:8080 目的:出于安全,本地电脑是与远程服务器是网关不通的,为了能访问远程服务器数据必须做端口转发 SSH连接与身份认证为跳板机账号密 ...
- [INS-30131]执行安装程序验证所需的初始设置失败(原因:无法访问临时位置)
[INS-30131]执行安装程序验证所需的初始设置失败(原因:无法访问临时位置) 学习了:https://blog.csdn.net/killvoon/article/details/5182192 ...
- Mac Finder中如何复制当前完整路径
1.拖到命令行 2.在Finder中command+i 会弹出详细信息,然后[位置]处进行 copy 3.利用Automator,添加一个服务的快捷键. 转自:http://q.cnblogs.com ...
- nyoj-659-推断三角形(大坑)
推断三角形 时间限制:1000 ms | 内存限制:65535 KB 难度: 描写叙述 小明非常喜欢研究三角形.如今,小明已经知道三角形的三条边.假设三条边能组成三角形,小明就会非常高兴,他就会得 ...