<!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. 《MySQL必知必会》过滤数据，数据过滤(where ,in ,null ,not)

    <MySQL必知必会>过滤数据,数据过滤 1.过滤数据 1.1 使用 where 子句 在SEL ECT语句中,数据根据WHERE子句中指定的搜索条件进行过滤. WHERE子句在表名(FR ...

  2. Mybatis 中判断参数长度

    <if test="params.length()!=2">

  3. Linux下mv命令高级用法

    mv 也是 Linux 下一个使用频率非常高的命令,但除了一些基本用法,你还知道它的哪些高级用法呢? 1. 基本用法 移动一个/多个文件: 移动一个/多个目录: 重命名文件/目录. 这些都是很基本的用 ...

  4. SpringBoot 集成SpringSecurity JWT

    目录 1. 简介 1.1 SpringSecurity 1.2 OAuth2 1.3 JWT 2. SpringBoot 集成 SpringSecurity 2.1 导入Spring Security ...

  5. （java）剑指offer二维数组中的查找

    在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从 上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. pu ...

  6. 使用folderLeft函数统计字母出现的次数

    实例:统计字符串中字母出现的次数 import scala.collection.mutable object Demo_018{ def main(args: Array[String]): Uni ...

  7. HTTP基础--请求

    请求,由客户端向服务器端发出,可以分为4部分:请求方法(Request Method),请求的网址(Request URL),请求头(Request Headers),请求体(Request Body ...

  8. FormData格式的数据

    向服务器提交的是FormData格式的数据 || 必须添加以下两个配置项 contentType:false, processData:false,

  9. 【Android】AndroidStudio（Eclipse）如何使用天天模拟器进行调试apk应用。

    作者:程序员小冰,GitHub主页:https://github.com/QQ986945193 新浪微博:http://weibo.com/mcxiaobing 大家都知道,我们这些Android开 ...

  10. 递推dp数位

    1-n里有多少个1 #include <cstdio> #include <iostream> using namespace std; int main() { int n= ...