效果图：

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. PB程序“无法启动此程序，因为计算机中丢失PBvm90.dll。尝试重新安装该程序以解决此问题”的解决方法

    因为有计算机自考科目,要求使用PB程序做一个管理系统.昨天刚安装好了PB程序,今天使用的时候,当我打开一个PB程序时,出现了"无法启动此程序,因为计算机中丢失PBvm90.dll.尝试重新安 ...

  2. JQuery和Ajax在ASP.NET MVC中的基本应用

    当我们在开发Web应用程序中使用JQuery和Ajax异步调用来实现很多功能时,不仅提高了程序的性能,而且给用户一个更好的交互式界面操作体验.接下来我们依旧用简单的实例来学习下它们的应用. 创建一个A ...

  3. 深度了解Android 7.0 ，你准备好了吗？

    作者:Redyan, 腾讯移动客户端开发工程师 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. 原文链接:http://wetest.qq.com/lab/view/288.html ...

  4. Javascript高级程序设计——Javascript简史+使用Javascript

    一.Javascipt简史 1.了解Javascript历史 Netscape(Javascript1.0).Microsoft(JScript)到JS1.1,再到ECMA-262标准 2.知道ECM ...

  5. 使用yum安装cmake

    一.搜索yum源中的CMake,查看源中最新的版本是什么,使用命令[root@localhost ~]# yum search cmake ,如果搜索出的结果过多可以配合grep命令来控制搜索结果. ...

  6. console深入理解

    ["$$", "$x", "dir", "dirxml", "keys", "values ...

  7. Git 基本工作流程

    1. 用户信息配置(全局配置) $ git config --global user.name leo$ git config --global user.email hehe_xiao@qq.com ...

  8. opensessioninviewFilter导致org.hibernate.NonUniqueObjectException

    起因: 公司业务需求,增加了一个新的数据源,增加之后,起初一切正常,但是发现后台管理系统所有Ajax请求获取信息没有问题,但是涉及到保存操作就抛出异常. 异常: org.hibernate.NonUn ...

  9. Extjs中grid前端分页使用PagingMemoryProxy【二】

        在项目中遇到Grid前端分页,本人也是刚接触extjs没多久,为了实现效果,一直找了很久才实现出来,对于代码中的一些也不能详细的说明出来, 不知道能不能帮助到遇到同样问题的朋友,所以将例子代码 ...

  10. CCF2013123最大的矩形（C语言版）

    问题描述 在横轴上放了n个相邻的矩形,每个矩形的宽度是1,而第i(1 ≤ i ≤ n)个矩形的高度是hi.这n个矩形构成了一个直方图.例如,下图中六个矩形的高度就分别是3, 1, 6, 5, 2, 3 ...