效果图：

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. Qt 中QString 字符串操作：连接、组合、替换、去掉空白字符

    Qt中的字符串类 QString类 保存了16位Unicode值,提供了丰富的操作.查询和转换等函数. QString 字符串有如下几个操作符: (1) "+" 用于组合两个字符串 ...

  2. Spark SQL 用户自定义函数UDF、用户自定义聚合函数UDAF 教程（Java踩坑教学版）

    在Spark中,也支持Hive中的自定义函数.自定义函数大致可以分为三种: UDF(User-Defined-Function),即最基本的自定义函数,类似to_char,to_date等 UDAF( ...

  3. .Net程序员学用Oracle系列(19)：我知道的导出和导入

    1.传统的导出/导入工具 1.1.EXP 命令详解 1.2.IMP 命令详解 1.3.EXP/IMP 使用技巧 2.新的导出/导入工具 2.1.EXPDP/IMPDP 参数说明 2.2.EXPDP/I ...

  4. poj 2236

    Wireless Network Time Limit: 10000MS   Memory Limit: 65536K Total Submissions: 25817   Accepted: 107 ...

  5. visibility: hidden和 display: none的区别

    visibility: hidden----将元素隐藏,但是在网页中该占的位置还是占着. display: none----将元素的显示设为无,即在网页中不占任何的位置.

  6. js原生Ajax 的封装和原理

    原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...

  7. HTM5新手学习的一些日常总结，相互交流和相互学习。

    第一天 一.HTML--网页的源码(超文本标签语言) HTML标签 标签式是HTML最基本单位和最重要的组成. 使<和>扩起来 标签都是闭合的(规范) HTML标签属性 是标签的一部分,用 ...

  8. 20170305Meetup Git、heroku drop db

    Rails中,给link_to添加上action和class样式,内部文本 <%= link_to product_path(product),{ :controller => 'cont ...

  9. struts.xml语法

    <!-- 1. struts.xml配置常量, 用来覆盖struts.properties中的默认常量配置 一般情况下, 这个配置放在struts.xml中, 不要放在各个模块的xml中. co ...

  10. 通过Servlet生成验证码图片

    原文出自:http://www.cnblogs.com/xdp-gacl/p/3798190.html 一.BufferedImage类介绍 生成验证码图片主要用到了一个BufferedImage类, ...