<!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. 浏览器自动化的一些体会7 selenium webdriver的一些问题

    1. 下载图片 这个链接说得最好,差不多所有可能的方法都列举了,除了没有提到用URLDownloadToFile,不过这和用WebClient差不多. https://stackoverflow.co ...

  2. MPI实现Jacobi

    一.Jacobi迭代 #include<stdio.h> #include<mpi.h> #include<stdlib.h> #define totalsize ...

  3. [Redhat虚拟机安装][VirtualBox][NET:Registered protocol family 2]

    错误情况 今晚试着用VirtualBox虚拟机安装RedHat,但是安装过程中一直卡在一个NET:Registered protocol family 2这个地方. 错误截图 情况如下图所示: 解决方 ...

  4. ClassFile与JClass

    本次大作业中 java程序——>二进制流(byte[ ]表示)——>ClassFile对象——>JClass ClassFile的字段:magic,minorversion..... ...

  5. Laravel Facade原理及使用

    Laravel Facade原理及使用 laravel过于庞大,加之笔者水平有限,所以后面的源码解读会按模块功能介绍,希望能帮大家稍微捋顺下思路,即使能够帮助大家回顾几个函数也好.如发现错误,还望指正 ...

  6. APM姿态控制流程

    对初学者了解控制流程有一定帮助 在主循环执行过程中(比如Pixhawk的任务调度周期2.5ms,400Hz:APM2.x为10ms,100Hz),每一个周期,程序会按下述步骤执行:• 首先,高层次文件 ...

  7. Android开发之强大的网络判断工具，判断是否联网，判断是wifi还是3g网络等java工具代码类

    作者:程序员小冰,CSDN博客:http://blog.csdn.net/qq_21376985, 转载请说明出处. 给大家分享一个Android开发者常用的工具类.主要针对网络判断的 功能强大.下面 ...

  8. android开发中防止刚进入activity时edittext获取焦点，防止自动自动弹出软键盘

    刚进入activity的时候,如果布局组件有edittext的话,往往edittext会获取焦点,自动弹出软键盘,影响整个界面的视觉效果.解决方法如下: 可以在edittext的父布局结构中(例如Li ...

  9. 使用rabbitmq过程中遇到的问题及解决方法记录。

    OS: Linux ---Centos7RabbitMQ版本:RabbitMQ version: 3.8.1erlang版本:Erlang configuration: Erlang/OTP 22 [ ...

  10. checkbox手动样式改变

    .image_input_checkbox{ width:18px; height:18px; display: inline-block; vertical-align: middle; -webk ...