<!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. chaos;head移植版缺失python27.dll SDL2.dll问题解决

    注意 不要在目录名中有字符' ; '

  2. guice的能力简述

    guice这个google出的bean容器框架,ES有用到他. 能干什么 是一个bean容器 能AOP 能力细分与使用方式 以module创建injector.可以看成是一个容器.Module需要自定 ...

  3. 了解JS压缩图片，这一篇就够了

    前言 公司的移动端业务需要在用户上传图片是由前端压缩图片大小,再上传到服务器,这样可以减少移动端上行流量,减少用户上传等待时长,优化用户体验. 插播一下,本文案例已整理成插件,已上传npm ,可通过 ...

  4. 反制面试官 | 14张原理图 | 再也不怕被问 volatile!

    反制面试官 | 14张原理图 | 再也不怕被问 volatile! 悟空 爱学习的程序猿,自主开发了Java学习平台.PMP刷题小程序.目前主修Java.多线程.SpringBoot.SpringCl ...

  5. JAVA HTML 以压缩包下载多文件

    Html:  利用form表单来发送下载请求 <form id ="submitForm" method="post"> </form> ...

  6. Vue学习（十三）模版引擎算是预处理器吗？

    前言 今天在看vue-loader预处理器配置相关的内容,突然看到了Pug,然后有了一个疑问:模版引擎原来是预处理器吗? 答案是:YES 说明 这里重点讨论使用不同的js模板引擎作为预处理器, 下面示 ...

  7. 实践案例丨教你一键构建部署发布前端和Node.js服务

    如何使用华为云服务一键构建部署发布前端和Node.js服务 构建部署,一直是一个很繁琐的过程 作为开发,最害怕遇到版本发布,特别是前.后端一起上线发布,项目又特别多的时候. 例如你有10个项目,前后端 ...

  8. python爬虫用drony转发进行抓包转发

    转载至https://www.cnblogs.com/lulianqi/p/11380794.html#l_2 实际操作步骤(Android) 笔者这里直接使用上面提到第3种方法(方法1在对于手机AP ...

  9. C++ Templates （1.7 总结 Summary）

    返回完整目录 目录 1.7 总结 Summary 1.7 总结 Summary 函数模板定义了一系列不同模板实参的函数 当传递实参给依赖于模板参数的函数参数,函数模板推断模板参数并实例化相应的参数类型 ...

  10. 虚拟化技术之kvm镜像模板制作工具virt-sysprep

    virt-sysprep这个工具来自libguest-tools这个工具包,它能够把kvm虚拟机对应的磁盘文件做成一个模板,后续我们启动虚拟机就可以基于这个镜像模板启动:什么是镜像模板呢?所谓模板就是 ...