一个简单的成品多页标签,拿来即可使用.
<style type="text/css">
*{padding:0px;margin:0px;}
body{ width:98%;padding:0px;margin:0px;}
UL{list-style-type:none; margin:0px;font-size:12px;height:30px;padding:0px;}
.w936{margin:auto;width:100%;height:30px;}
.tb_{background-repeat: repeat-x;width:auto;height:40px;width:100%;}
.tb_ ul{height:30px;width:100%;}
.tb_ li{float:left;height: 30px;line-height:30px;width: 130px;cursor:pointer; text-align:center;}
.tb_ li a{font-family:"宋体"; font-size:12px; text-align:left;}
.normaltab { background:url(../images/cz_normal.gif); background-repeat: no-repeat; color:#1F3A87 ;}
.hovertab { background:url(../images/cz_active.gif); background-repeat: no-repeat; color:#000; font-weight:bold }
.navline{width:100%;height:5px; font-size:0px; background-color:#91d0fb;}
</style>
<script type="text/javascript">
function g(o){return document.getElementById(o);}
function HoverLi(n){
for(var i=1;i<=4;i++){g('tb_'+i).className='normaltab';}
g('tb_'+n).className='hovertab';
if(n==1){
parent.bottomFrame2.location.href="http://www.baidu.com";
}else if(n==2){
parent.bottomFrame2.location.href="http://www.google.com.hk";
}else if(n==3){
parent.bottomFrame2.location.href="http://yuelangyc.iteye.com";
}
}
</script>
</head>
<body>
<div class="w936">
<div id="tb_" class="tb_">
<ul>
<li id="tb_1" class="hovertab" onClick="x:HoverLi(1);">百度</li>
<li id="tb_2" class="normaltab" onClick="i:HoverLi(2);">google</li>
<li id="tb_3" class="normaltab" onClick="a:HoverLi(3);">博客</li>
<li id="tb_4" class="normaltab" onClick="a:HoverLi(4);" disabled=true>不可用</li>
</ul>
<div class="navline"></div></div>
</div>
</div>
</body>
</html>
虽然很简单,但是很实用的东东.
可能会需要应用一个Frame框架,灵活运用吧.
分享到:
相关推荐
单页面实现bootstrap模态框ajax数据操作,使用SqlBulkCopy批量添加,js标签增删改查,泛型,Razor语法,数据库增删改查,批量操作,bootstrap、Ajax、js、jquery、数据统计,加密与解密,时间控件,富文本内容编辑器...
用vue2实现的一个登录页demo, 背景图可直接替换,成品案例直接可运行 设计技术: vue2、element-ui、vue-router、滑块校验 安装包 npm install 开发运行 npm run serve 编译运行 npm run build 代码解读: ...
25.JavaScript表单验证及高级操作_理论1 26.JavaScript表单验证及高级操作_理论2 27.JavaScript表单验证及高级操作_上机 28.初探SEO技术1 29.初探SEO技术2 30.指导学习课1 31.指导学习课2 32.内部测试题 33.阶段...
我的家乡学生网页作业成品采用DIV+CSS制作,主题为杭州城市旅网页,网页整体宽度1200PX,使用CSS设置了页面背景图片,首页使用VIDEO标签插入了视频,导航部分简单制作了鼠标经过字体加粗效果。共5个页面:网站主页、...
- 后端方面:JavaSe核心语法、MVC(controlle层、service、dao层)模型开发、jsp相关语法(jstl标签库、el表达式)、maven构建项目和管理jar包 - 前端方面:JavaScript(jquery)核心语法、AJAX异步刷新、Layui前端 UI...
成品图 内容 项目介绍 该项目旨在为韩国航空大学学生创建具有内置各种便利功能的chrome扩展程序。 使用的技术 该项目使用React.js库构建,而API服务器将使用Node.js和express框架构建。 它还利用Chrome扩展程序开发...
吸取了如此教训,那一起来看看动效炫酷的效果应该如何做吧~当你关闭一个标签时,它就会从屏幕上消失:简单地说,这给了用户一个即时的反馈动作(这个视觉效果对我们来说非常重要)。深入地说,动作让人类感受到了...
paperless.js-制造执行系统一组javascript组件和准则,用于组织PVC,木材和铝型材窗户装配车间中的无纸化生产。 该组合体使您可以根据扫描标签的结果或使用交互式过滤器在屏幕上显示: 生产任务的组成单元格中空白的...
还有一个名为 MailDeck 的插件的外壳,它有朝一日将允许用户创建各种标签或对话的 TweetDeck 样式列。 真的,现在插件甚至还没有半成品,它就像是八分之一——我们刚刚创建了这个 repo 并开始在这里移动代码,这样...
构建一个简单的网页 解释 HTML 文档的各个部分,包括: <head>和<body>标签 容器元素,例如 、 、 、 和 常见元素,例如 、 、 、 和 解释HTML和DOM之间的区别 准备 准备工作和关于我页面完成 挂钩 ...