<!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. 关于C#调用非托管DLL，报“内存已损坏的”坑，坑，坑

    因客户需求,与第三方对接,调用非托管DLL,之前正常对接的程序,却总是报“内存已损坏的异常”,程序进程直接死掉,折腾到这个点(2018-05-11 00:26),终于尘埃落定,直接上程序. 之前的程序 ...

  2. unity探索者之iOS微信登录、分享

    版权声明:本文为原创文章,转载请声明http://www.cnblogs.com/unityExplorer/p/8405700.html iOS接入微信的SDK相对于安卓要麻烦一点,除了核心功能代码 ...

  3. 在vue中使用echarts报错Cannot read property getAttribute of null

    报错信息如下: 报错代码: mounted() { // ... this.drwaCharts() // drawCharts方法为自己定义的包含渲染 echarts 图表的方法 // ...} 之 ...

  4. machine vision plan

    以OpenCV+C#/C++为主,Halcon+C#/C++.LabVIEW+NI Vision,其他还不了解 目前:Halcon+C# 1.完成:测量定位,表面质量检测 2.完成1后开始:OpenC ...

  5. SQL关键字的执行顺序

    1.Mysql执行顺序,即在执行时sql按照下面的顺序进行执行: from on join where group by having select distinct union order by 2 ...

  6. .Net Core中的诊断日志DiagnosticSource讲解

    前言     近期由于需要进行分布式链路跟踪系统的技术选型,所以一直在研究链路跟踪相关的框架.作为能在.Net Core中使用的APM,SkyWalking自然成为了首选.SkyAPM-dotnet是 ...

  7. linux云服务器搭建 express后台 nginx转发

    购买云服务器 或者自己在本地搭建一个虚拟机 (我用的是腾讯云云服务器(CVM),或者可以购买阿里云 ecs服务器) 购买完成后 配置安全组 允许http https ftp 端口 一般运营商会提供说明 ...

  8. python字典的概念与基本操作

    字典是非常常用的一种数据结构,它与json格式的数据非常相似,核心就是以键值对的形式存储数据,关于Python中的字典做如下四点说明: 1.构造字典对象需要用大括号表示 {},每个字典元素都是以键值对 ...

  9. Markdown - Typora 10分钟入门 - 精简归纳

    Markdown - Typora 10分钟入门 - 精简归纳 JERRY_Z. ~ 2020 / 8 / 22 转载请注明出处! 目录 Markdown - Typora 10分钟入门 - 精简归纳 ...

  10. 拿捏了！ConcurrentHashMap！

    概述 本文将对JDK8中 ConcurrentHashMap 源码进行一定程度的解读.解读主要分为六个部分:主要属性与相关内部类介绍.构造函数.put过程.扩容过程.size过程.get过程.与JDK ...