【HTML5】选项卡
效果图:
HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" language="JavaScript" src="js/script.js"></script> </head> <body> <div class="body"> <div class="box" id="box"> <ul class="title"> <a href="#"><li id="t1" onclick="oclick('t1')">新闻</li></a> <a href="#"><li id="t2" onclick="oclick('t2')">杂志</li></a> <a href="#"><li id="t3" onclick="oclick('t3')">动漫</li></a> <a href="#"><li id="t4" onclick="oclick('t4')">音乐</li></a> </ul> <div id="d1" style="display: none"> </div> <div id="d2" style="display: none"> </div> <div id="d3" style="display: none"> </div> <div id="d4" style="display: none"> </div> </div> </div> </body> </html>
CSS:
;;} .box .title,.box .title li{;;} .body{width: 1200px; height: 1000px; box-shadow: 0 0 5px gray; margin: 0 auto; border: 1px solid #fff;} .box{width: 820px; height: 366px; box-shadow: 0 0 5px gray; margin: 200px auto; border: 1px solid #fff;} .box .title{list-style: none; text-align: center;} .box .title li{width:80px; height:40px; font:12px/40px "微软雅黑"; float:left; background:ghostwhite; border:1px solid #f2f2f2;} .box .title a li:hover{background:#F2F2F2} .box div{width:820px; height:320px; margin-top:46px;}
JS:
// This is Glunefish js function. function oclick(x){var obj = document.getElementById(x); obj.style.border='none'; obj.style.background='#fff'; var ttotal = ['t1','t2','t3','t4']; for(var i=0;i<4;i++){ if(ttotal[i] == x){ boxchange(i) ; ttotal.splice(i,1); continue;} } for(var i=0;i<ttotal.length;i++){ var obj = document.getElementById(ttotal[i]); obj.style.border='1px solid #f2f2f2'; obj.style.background='ghostwhite';} } function boxchange(x){ var dlist = ['d1','d2','d3','d4']; for(var i=0;i<dlist.length;i++){ document.getElementById(dlist[i]).style.display='none'} document.getElementById(dlist[x]).style.display='block'; } onload = function(){oclick('t1');}
【HTML5】选项卡的更多相关文章
- 基于HTML5 Tab选项卡动画切换特效
基于HTML5 Tab选项卡动画切换特效.这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
- 关于HTML5中hash部分API在历史管理,选项卡自动跳转中的一点使用
在群里最近有人提到如何处理在页面跳转之后,想要直接定位到相对应的选项卡的选项上,比如首页有登录和注册两个按钮,而登录注册页面有一对选项卡分别对应的是登陆和注册,想要实现的功能是点击登陆去到登录页的登录 ...
- HTML5 开发APP(头部和底部选项卡)
我们开发app有一定固定的样式,比如头部和底部选项卡部分就是公共部分就比如我在做的app进来的主页面就像图片显示的那样 我们该怎么实现呢,实现我们应该建一个主页面index.html,然后建五个子页面 ...
- MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换
概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...
- HTML5 学习总结(三)——本地存储
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- js,jquery,css,html5特效
包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...
- HTML5 学习笔记(三)——本地存储
目录 一.HTML4客户端存储 1.1.提交表单发送到服务器的信息 1.2.客户端本地存储概要 二.localStorage 2.1.添加 2.2.取值 2.3.修改 2.4.删除 2.5.跨页面与跨 ...
- 移动前端不得不了解的html5 head 头标签
本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta标签 ...
- 面向对象和面向过程的jquery版选项卡
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...
随机推荐
- 通过oledb驱动读取excel、csv数据丢失解决方案
1.问题出现 在开发应用程序的过程中,比较常用一功能就是通过oledb驱动读取excel.csv.text等文件:而最近有客户反映,在使用短信平台(下载地址:http://www.sms1086.co ...
- 服务器 'XXXXXX' 上的 MSDTC 不可用。解决方法
今天在C#中操作数据库的时候突然发现这个问题:服务器 'USER-XXX' 上的 MSDTC 不可用. 解决方法: 在windows控制面板 --> 管理工具 --> 服务 --> ...
- php弱类型语言中的类型判断
1.php一个数字和一个字符串进行比较或者进行运算时,PHP会把字符串转换成数字再进行比较.PHP转换的规则的是:若字符串以数字开头,则取开头数字作为转换结果,若无则输出0. 例如:123abc转换后 ...
- 【UWP】Gank 干货集中营 客户端
简介 一个偶然的机会,在网上看到了 <「代码家」的学习过程和学习经验分享>,知道了代码家做的Gank网站. 干货集中营 每日分享妹子图 和 技术干货,还有供大家中午休息的休闲视频 在看过一 ...
- 初识Windous程序
文本框Label MaxLength 设置输入文本最大字符 Multiline 表示是否输入多行文本 passwodechar 指示在文本框显示的字符,而不是实际内容 ReadeOnly 表示是否可 ...
- BigInteger和BigDecimal的练习
前言: BigInteger用于处理大数据的计算,它继承自java.math.BigInteger.用法相对来说比较简单,掌握几个基本运算即可. 初始化: BigInteger sum=new Big ...
- Gradle之恋-任务2
由于任务作为Gradle的核心功能模块,多花点精力是值得的,本文继上一篇主要涉及到:任务的执行顺序.为任务添加组和描述.跳过任务.扩展任务属性.定义默认任务. 任务顺序 如果构建(build)不能在清 ...
- 在.NET项目中使用PostSharp,实现AOP面向切面编程处理
PostSharp是一种Aspect Oriented Programming 面向切面(或面向方面)的组件框架,适用在.NET开发中,本篇主要介绍Postsharp在.NET开发中的相关知识,以及一 ...
- Android: Fragment (Trying to instantiate a class that is not a Fragment)
Fragments API: https://developer.android.com/guide/components/fragments.html 第一次使用Fragment遇到一个问题就是: ...
- php+apache+mysql的安装
1.LAMP的安装顺序问题,现在是默认安装好了Linux系统,我的版本是Ubuntu 12.04.一般来说比较建议的顺序是Mysql Apache 最后安装PHP,在我实践下来 Apache和Mysq ...