效果图：

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】选项卡的更多相关文章

  1. 基于HTML5 Tab选项卡动画切换特效

    基于HTML5 Tab选项卡动画切换特效.这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

  2. 关于HTML5中hash部分API在历史管理，选项卡自动跳转中的一点使用

    在群里最近有人提到如何处理在页面跳转之后,想要直接定位到相对应的选项卡的选项上,比如首页有登录和注册两个按钮,而登录注册页面有一对选项卡分别对应的是登陆和注册,想要实现的功能是点击登陆去到登录页的登录 ...

  3. HTML5 开发APP(头部和底部选项卡)

    我们开发app有一定固定的样式,比如头部和底部选项卡部分就是公共部分就比如我在做的app进来的主页面就像图片显示的那样 我们该怎么实现呢,实现我们应该建一个主页面index.html,然后建五个子页面 ...

  4. MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换

      概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...

  5. HTML5 学习总结（三）——本地存储

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  6. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  7. HTML5 学习笔记（三）——本地存储

    目录 一.HTML4客户端存储 1.1.提交表单发送到服务器的信息 1.2.客户端本地存储概要 二.localStorage 2.1.添加 2.2.取值 2.3.修改 2.4.删除 2.5.跨页面与跨 ...

  8. 移动前端不得不了解的html5 head 头标签

    本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta标签 ...

  9. 面向对象和面向过程的jquery版选项卡

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...

随机推荐

  1. shell-3

    每天学习一篇:利用跑代码或者空闲思考时间,启动环境时间等闲杂时间: http://blog.csdn.net/junjieguo/article/category/880326/2

  2. 4105: [Thu Summer Camp 2015]平方运算

    首先嘛这道题目只要知道一个东西就很容易了:所有循环的最小公约数<=60,成一条链的长度最大为11,那么我们就可以用一个很裸的方法.对于在链上的数,我们修改直接暴力找出并修改.对于在环上的数,我们 ...

  3. [转]部署Let’s Encrypt免费SSL证书&&自动续期

    最近公司网站要用https,从自己摸索到找到国内的免费证书到选购正式的收费证书,最后老板说:太贵!不要.一脸懵逼的听老板提到Let's Encrypt证书,没办法,用呗.之前是有一些了解,国外发布的一 ...

  4. esri-leaflet入门教程（5）- 动态要素加载

    esri-leaflet入门教程(5)- 动态要素加载 by 李远祥 在上一章节中已经说明了esr-leaflet是如何加载ArcGIS Server提供的各种服务,这些都是服务本身来决定的,API脚 ...

  5. Ancient Cipher UVa1339

    这题就真的想刘汝佳说的那样,真的需要想象力,一开始还不明白一一映射是什么意思,到底是有顺序的映射?还是没顺序的映射? 答案是没顺序的映射,只要与26个字母一一映射就行 下面给出代码 //Uva1339 ...

  6. 利用Eclipse的JPA自动生成注解实体

    新公司用的SSH(springmvc)框架,看代码的时候,发现没有hbm.xml文件,全部使用的注解形式.在一次闲聊的时候问同事,这么多entity  写起来不麻烦么.同事说根据数据库自动生成的.于是 ...

  7. ASP.NET MVC4.0+ WebAPI+EasyUI+KnockOutJS快速开发框架 通用权限管理系统

    1.基于 ASP.NET MVC4.0 + WebAPI + EasyUI + Knockout 的架构设计开发 2.采用MVC的框架模式,具有耦合性低.重用性高.生命周期成本低.可维护性高.有利软件 ...

  8. C#一定比C++性能差？当然不！破除迷信，从我做起！

    几乎所有的程序员在初学编程之时,都被灌输过"托管语言(Java.C#)性能比非托管语言(C.C++)差好多" 的迷信教条.如果你问他们为什么,他们一定会说:托管语言需要通过虚拟机或 ...

  9. 关于Android App开发技术分类的一个小总结

     前言 本文从热更新.异步并发.性能优化.网络请求等多个方面对Android App开发的技术进行了一个分类总结.欢迎大家沟通交流. 热更新 [原]热更新开源项目Tinker源码解析之Dex热更新 [ ...

  10. JS中一些常用的内置对象

    在JS中,经常会遇到明明知道一个对象有某个属性或方法,可是又不知道怎么写的情况.下面,我就罗列了一些JS中常用的内置对象的属性和方法. Math对象: Math对象的作用是执行常见的算术任务. 首先M ...