<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css">

            body,ul,li,p{

                margin: 0;

                padding: 0;

            }

            #tabs{

                width: 300px;

                margin: 100px auto;

            }

            #tabs ul{

                height: 30px;

                width: 100%;

                line-height: 30px;

                display: flex;

                justify-content: space-around;

                border-bottom: solid 2px black;

            }

            li{

                height: 28px;

                width: 80px;

                line-height: 28px;

                font-weight: 200;

                text-align: center;

                border: solid 1px gray;

                border-bottom: none;

                list-style: none;

                cursor: pointer;

            }

            .onclick{

                border-top: solid 2px gray;

                border-bottom: solid 2px white;

            }

            #tabs div{

                padding: 10px;

                border: solid 1px gray;

                border-top: none;

            }

            .hidden{

                display: none;

            }

            #tabs p{

                line-height: 2;

                white-space: nowrap;

                text-overflow: ellipsis;

                overflow: hidden;

            }

        </style>

    </head>

    <body>

        <div id="tabs">

            <ul id="menu-list">

                <li class="onclick">国际新闻</li>

                <li>国内新闻</li>

                <li>世界杯</li>

            </ul>

            <div>

                <p>美征收钢铝关税 墨西哥称将向世贸组织投诉美国</p>

                <p>英首相特雷莎与特朗普通话：美国加征钢铝关税不合</p>

                <p>台军方已发现失联战机残骸，台军近20年已坠毁8</p>

                <p>俄罗斯俄罗斯俄罗斯俄罗斯俄罗斯俄罗斯俄罗斯俄</p>

            </div>

            <div class="hidden">

                <p>台风来了！今年第4号台风生成，它给广东带来的影</p>

                <p>台风白色预警发布！第4号台风24小时内将影响深</p>

                <p>央视：滴滴顺风车再爆审核漏洞 整改成效几何？</p>

                <p>台湾水果价格崩跌20年最惨 国民党批蔡当局</p>

            </div>

            <div class="hidden">

                <p>俄罗斯世界杯前瞻:俄罗斯会成为“史上最弱东道主”吗?</p>

                <p>特使孙春兰将出席俄罗斯世界杯开幕式</p>

                <p>卡拉斯科:俄罗斯世界杯全力以赴 维特塞尔:我骄傲</p>

                <p>球迷必收藏!2018俄罗斯世界杯最终23人大名单:736人汇总!</p>

            </div>

        </div>

    </body>

    <script type="text/javascript">

        var tabs = document.getElementById('tabs');

        var menuList = document.getElementById('menu-list');

        var listItems = menuList.querySelectorAll('li');

        var divs = tabs.querySelectorAll("div");

        for (var i = 0;i < listItems.length;i++) {

            listItems[i].index = i;

            listItems[i].onclick = function(){

//                alert(this.index);

                for(var j = 0; j < listItems.length; j++) {

                    listItems[j].className = "";

                    divs[j].className = "hidden";

                }

                this.className = "onclick";

                divs[this.index].className = "";

            }

        }

    </script>

</html>

js之按钮切换的更多相关文章

  1. 按钮切换显示不同的内容(js控制)

    今天项目发现了一个jsp页面按钮切换,下面展示模块的不同显示问题,看到同事修改完之后的效果,js控制感觉特写好,所以想写把这个好的方法js记录下来,以便以后的参考. 一:先上图,了解大概的样子,如下图 ...

  2. 通过jquery js 实现幻灯片切换轮播效果

    观察各个电商网址轮播图的效果,总结了一下主要突破点与难点 1.->封装函数的步骤与具体实现 2->this关键字的指向 3->jquery js函数熟练运用 如animate 4-& ...

  3. 原生javascript-图片按钮切换

    原生javascript-图片按钮切换 即上次被分配写原生JS相册弹窗后,这次又接到了写原生JS,图片按钮切换,真激情: 个人在线实例:http://www.lgyweb.com/picSwitch/ ...

  4. 前端设计——js实现图片切换的淡入淡出

    1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...

  5. JQuery实现点击按钮切换图片(附源码)--JQuery基础

    JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...

  6. javascript闭包的使用--按钮切换

    闭包实现按钮状态切换 看下面的代码: var toggleBtn = document.getElementById('toggle'); var toggleFun = (function() { ...

  7. JS图片Switchable切换大集合

    JS图片切换大集合 利用周末2天把JS图片切换常见效果封装了下,比如:轮播,显示隐藏,淡入淡出等.废话不多说,直接看效果吧!JSFiddler链接如下: 想看JS轮播切换效果请点击我! 当然由于上传图 ...

  8. js触发按钮点击事件

    js触发按钮点击事件 博客分类: javascript   模拟JS触发按钮点击功能 <html> <head> <title>usually function&l ...

  9. Android控件Gridview实现仿支付宝首页，Fragment底部按钮切换和登录圆形头像

    此案例主要讲的是Android控件Gridview(九宫格)完美实现仿支付宝首页,包含添加和删除功能:Fragment底部按钮切换的效果,包含四个模块,登录页面圆形头像等,一个小项目的初始布局. 效果 ...

随机推荐

  1. ElasticSearch实战系列八: Filebeat快速入门和使用---图文详解

    前言 本文主要介绍的是ELK日志系统中的Filebeat快速入门教程. ELK介绍 ELK是三个开源软件的缩写,分别表示:Elasticsearch , Logstash, Kibana , 它们都是 ...

  2. I帧B帧P帧

    转载自:http://blog.csdn.net/abcjennifer/article/details/6577934 视频压缩中,每帧代表一幅静止的图像.而在实际压缩时,会采取各种算法减少数据的容 ...

  3. 【转】camera tuning

    chromatix项目必须包含有效的 ADC image.png filcker: 交流电照明灯发出的光会一定频率的抖动导致sensor图像出现行方向的水波纹,称之为filcker.目前主要的交流电频 ...

  4. Jenkins读取Allure结果出报告

    1.想 jenkins 有展示和解析 Allure 报告的能力,就必须装 Allure 插件. 「安装插件地址:」 http://updates.jenkins-ci.org/download/plu ...

  5. ent orm笔记1---快速尝鲜

    前几天看到消息Facebook孵化的ORM ent转为正式项目,出去好奇,简单体验了一下,使用上自己感觉比GORM好用,于是打算把官方的文档进行整理,也算是学习一下如何使用. 安装 ent orm 需 ...

  6. 开源搜索引擎排名第一，Elasticsearch是如何做到的？

    一.引言 随着移动互联网.物联网.云计算等信息技术蓬勃发展,数据量呈爆炸式增长.如今我们可以轻易得从海量数据里找到想要的信息,离不开搜索引擎技术的帮助. ​ 作为开源搜索引擎领域排名第一的 Elast ...

  7. SEO工程师考试题目

    http://www.wocaoseo.com/thread-201-1-1.html      SEO,全名Search Engine Optimization,其中文名字为'搜索引擎优化' .其英 ...

  8. Node.js 学习笔记之四：使用数据库

    这部分示例将示范SQLite3.MongoDB这两种不同类型的数据库在 Node.js 中的使用方法.首先,我们要在code目录下执行mkdir 06_database命令来创建用于存放这一组示例的目 ...

  9. android开发之动画的详解 整理资料 Android开发程序小冰整理

    /** * 作者:David Zheng on 2015/11/7 15:38 * *  网站:http://www.93sec.cc * *  微博:http://weibo.com/mcxiaob ...

  10. spring cloud 路由

    Spring Cloud Feign:用于微服务之间,只映射内网ip Spring Cloud Gateway:用于服务端,对外开放的接口,对外统一访问gateway映射的ip 是这样吗? 但是这样权 ...