html5 div css 页签,div css 实现tabs标签的思路及示例代码
1、创建页签,以及页签内容的div。
2、编写被选中的页签和页签内容div显示、隐藏的样式。
3、编写js方法,根据被选中的页签,显示相应的页签内容。
例如:
复制代码代码如下:
function doClick(o){
//当前被中的对象设置css
o.className="nav_current";
var j;
var id;
var e;
//遍历所有的页签,没有被选中的设置其没有被选中的css
for(var i=1;i<=7;i++){ //i<7 多少个栏目就填多大值
id ="nav"+i;
j = document.getElementById(id);
e = document.getElementById("sub"+i);
if(id != o.id){
j.className="nav_link";
e.style.display = "none";
}else{
e.style.display = "block";
}
}
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin:0; padding:0 }
fieldset, img { border:0 none }
:focus { outline:0 }
.dis{display:block;}
.undis{display:none;}
ol, ul { list-style:none }
.fr { display:inline; float:right!important }
.fl { display:inline; float:left!important }
.show { display:block }
.hide { display:none }
.highlight { color:#F30!important }
.important { font-weight:bold!important }
.center { text-align:center!important }
body { font:12px/1.5 tahoma, sans-serif; color:#333 }
a { text-decoration:none; color:#333 }
a:hover { text-decoration:underline; color:#E30751 }
.nav_current{ float:left;background:#FFF; color:#F00; }
.nav_link{ float:left;}
.nav_current:hover ,.nav_link:hover{ color:#FF6600;}
#dww-menu { width:978px; overflow:hidden; border:1px #dcdcdc solid; }
#dww-menu .mod-hd { overflow:hidden; height:30px; line-height:30px; position:relative; background:#CCCCCC repeat-x 0 0 }
#dww-menu .mod-hd li { float:left; cursor:pointer; text-align:center; height:30px; line-height:30px; padding:0 10px; letter-spacing:1px; text-transform:uppercase; border-right:1px #dcdcdc solid }
#dww-menu .mod-hd li.hover { font-weight:900; background:#FFF }
#dww-menu .mod-bd { padding:5px 10px }
#dww-menu .mod-bd div {color:#BFBFBF; line-height:24px }
#dww-menu .mod-bd div.show { display:block }
#dww-menu .mod-bd div a { display:inline-block; padding:0 4px }
- 标签1
- 标签2
- 标签3
- 标签4
- 标签5
- 标签6
- 标签7
标签内容1
标签内容2
标签内容3
标签内容4
标签内容5
标签内容6
标签内容7
html5 div css 页签,div css 实现tabs标签的思路及示例代码相关推荐
- js动态添加html页签(JavaScript 拼接html标签代码)
目录 情形:需求 实现:分析 实现 页面:前端 总结:仔细再仔细 情形: 最近遇到这样一个情况: 需要实现动态增加页面,可以添加页面,页面的内容需要能保存,修改和删除. 页面的名字可编辑,并且要实现单 ...
- css 伪类 disabled,css3 :enabled与:disabled伪类选择器(示例代码)
css :enabled和:disabled伪类选择器 在Web表单中,有些表单元素(如输入框.密码框.复选框等)有"可用"和"不可用"这2种状态.默认情况下, ...
- router vue 页签文字_vue-router实现tab标签页(单页面)详解
vue-router 是 Vue.js 官方的路由插件,适合用于构建标签页应用.Vue 的标签页应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来,vue-router 会把各个组件 ...
- css制作流程卡片,css3 column实现卡片瀑布流布局的示例代码
本文介绍了css3 column实现卡片瀑布流布局的示例代码,分享给大家,具体如下: 实现效果 今天遇到了需要实现一个卡片的瀑布流布局的问题,卡片高度是不同的. 最后使用css3中的column属性实 ...
- html5 strongeaseinout,HTML5新特性 之canvas标签(Day1-4)(示例代码)
canvas 1.什么是canvas? 1.1 是HTML5提供的一种新标签 1.2 canvas是一个矩形区域的画布,可以用JavaScript在上面绘画.控制其每一个像素 1.3 canvas 拥 ...
- php 底部页面层,html 设置页脚div一直在页面底部
先上代码 //这部分的div的 position 是 fixed 解析: 1.先设置的 height 为 100%: 2.设置 body 的position 为 absolute,因为它里面的 div ...
- html 在div 底部显示不出来,html 设置页脚div一直在页面底部
先上代码 //这部分的div的 position 是 fixed 解析: 1.先设置的 height 为 100%: 2.设置 body 的position 为 absolute,因为它里面的 div ...
- 基于html5海贼王单页视差滚动特效
分享一款基于html5海贼王单页视差滚动特效是一款流行滑落网页特效代码.效果图如下: 在线预览 源码下载 实现的代码: <div class="top"><d ...
- js 点击按钮打开浏览器新页签,兼容版
话不多说直接上代码,这是千辛万苦寻来的,帮助需要帮助的人. <html><head>点击按钮打开浏览器新页签</head><body><div o ...
最新文章
- 随机梯度下降分类器(SGDClassifier)
- windows 防火墙导致开发板tftpboot不能正常下载
- spring cloud @RefreshScope刷新问题
- 前端 css+js实现返回顶部功能
- 金山词霸2012不能在PDF中取词 解决办法
- IDEA出现错误:找不到或无法加载主类 io.renren.RenrenApplication
- 推荐一个提供全球新冠肺炎确诊,死亡和治愈人数的网站,提供csv下载
- mysql 5.7 多主一从_mysql5.7多主一从,从机调优
- [转]Kali-linux安装之后的简单设置
- 使用js实现鼠标放置时显示下拉列表
- [Java][Android] 多线程同步-主线程等待所有子线程完成案例
- Windows安装curl
- matplotlib色彩(colors)之图表数据系列默认配色(默认色彩循环)
- 南京、无锡、苏州三地部分it岗待遇简况
- SwiftUI - @Binding
- 通过路由器映射 配置 远程访问
- flappy bird用java实现_java实现Flappy Bird游戏源代码
- APP、网站等注册、登录、改密等发送验证码短信的接入流程---创蓝253云通讯
- 论文阅读《No bot expects the DeepCAPTCHA》
- ACA-PEG-MAL,丙烯酰胺PEG马来酰亚胺
热门文章
- cli2弃用了吗 vue_vue-cli 3 和 vue-cli 2的区别
- CTF(Pwn) 当题目为我们提供Libc版本.so文件, 与 不提供的区别
- 转轮机加密详解两种解题方法 -攻防世界
- 语音通话框架_教资公告还没出,普通话测试又要改革?
- 【Python教程】七种创建对象的方式,你知道几种?
- python logging模块之handlers的使用教程
- Python实现跨文件全局变量的方法
- python中实现延时回调普通函数示例代码
- pandas - 案例(美国2012年总统候选人政治献金数据分析)
- 如何解决 linux socket TIME_WAIT 过多造成的问题(SYN、ACK、FIN、MSL、RST含义)netstat查看TCP连接数命令