效果图：

HTML：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link rel="stylesheet" href="css/style.css" />

        <script 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">

                    THIS IS 1

                </div>

                <div id="d2" style="display: none">

                    THIS IS 2

                </div>

                <div id="d3" style="display: none">

                    THIS IS 3

                </div>

                <div id="d4" style="display: none">

                    THIS IS 4

                </div>

            </div>

        </div>

    </body>

</html>

CSS：

    *{padding:; margin:;}

    .box .title,.box .title li{padding:;margin:;}

    .body{width: 1200px; height: 1000px; box-shadow: 0 0 5px gray; margin: 0 auto; border: 1px solid #808080;}

    .box{width: 420px; height: 266px;  box-shadow: 0 0 5px gray; margin: 200px auto; border: 1px solid #808080;}

    .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:420px; height:220px; 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');}

【原生JS】切换选项卡的更多相关文章

  1. 原生js实现选项卡样式切换的几种方式。

    先分享一个不能实现的实例(因为es5没有块作用域) for(var i=0; i<list.length; i++ ) { list[i].onclick = function(){ tabch ...

  2. 使用原生js实现选项卡功能实例教程

    选项卡是前端常见的基本功能,它是用多个标签页来区分不同内容,通过选择标签快速切换内容.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先来完成html部分 ...

  3. 原生js实现选项卡

    html代码: <div class="tab"> <ul> <li class="selected">图片</li& ...

  4. 原生js面向对象编程-选项卡(点击)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. 一个简单且丑陋的js切换背景图片基础示例

    不多说,直接上代码,非常基础的一个原生js切换元素背景图片范例 <html> <head> <meta http-equiv="Content-Type&quo ...

  6. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

  7. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

  8. 原生js实现tab切换

    //通过原生js实现table切换<html><head><meta http-equiv="Content-Type" content=" ...

  9. 标签页（tab）切换的原生js,jquery和bootstrap实现

    概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...

  10. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

随机推荐

  1. 第十章—DOM(0)—NODE类型

    DOM1定义了一个node接口,该接口由DOM的所有节点类型实现. 所有的节点都存在这样或那样的关系.在HTML中,head,body可以看出是html的子元素,html是head,body的父元素, ...

  2. 请自行检查是否安装VC9运行库？？

    phpStudy是一款PHP调试环境的程序集成包,该程序包集成最新的Apache+PHP+MySQL+phpMyAdmin+ZendOptimizer,一次性安装,无须配置即可使用,是非常方便.好用的 ...

  3. ORACLE常用的环境变量

    ORACLE_HOME:将要安装oracle软件的目录,指向oracle二进制文件应该安装到的位置. ORACLE_BASE:主机服务器上用于oracle软件的顶级目录 ORACLE_SID:定义一个 ...

  4. 洛谷 P1948 [USACO08JAN]电话线Telephone Lines 最短路+二分答案

    目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例 输出样例 说明 思路 AC代码 题面 题目链接 P1948 [USACO08JAN]电话线Telephone ...

  5. JavaScript--函数对象的属性caller与callee

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 【JZOJ4854】【NOIP2016提高A组集训第6场11.3】小澳的坐标系

    题目描述 小澳者表也,数学者景也,表动则景随矣. 小澳不喜欢数学,可数学却待小澳如初恋,小澳睡觉的时候也不放过. 小澳的梦境中出现了一个平面直角坐标系,自原点,向四方无限延伸. 小澳在坐标系的原点,他 ...

  7. 2017 校赛 问题 E: 神奇的序列

    题目描述        Aurora在南宁发现了一个神奇的序列,即对于该序列的任意相邻两数之和都不是三的倍数.现在给你一个长度为n的整数序列,让你判断是否能够通过重新排列序列里的数字使得该序列变成一个 ...

  8. lower_bounder()和upper_bound()的函数

    lower_bound() .upper_bound()都运用于有序区间的二分查找. ForwardIter lower_bound(ForwardIter first, ForwardIter la ...

  9. sql函数的使用——系统函数

    n  sys_context 1)terminal:当前会话客户所对应的终端的标识符 2)lanuage:语言 3)db_name:当前数据库名称 4)nls_date_format:当前会话客户端所 ...

  10. sql表连接 —— join

    一.内连接 —— INNER JOIN 内连接是最常见的一种连接,只连接匹配的行. 表1: 表2: 执行查询: select StudentId as 学生编号,StudentName as 姓名,G ...