<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    ul,li{
        list-style: none;
    }
    #warp{
        width: 600px;
        height: auto;
        margin: 0 auto;
        margin-top: 20px;
    }
    #warp .content p{
        width: 300px;
        height: 30px;
        background-color: #000;
        color: #fff;
        line-height: 30px;
        text-align: center;
    }
    #warp .content+ .content{
        margin-top: 2px;
    }
    #warp .content ul{
        display: none;
    }
    #warp .content ul.on{
        display: block;
    }
    #warp .content li{
        background-color: #ccc;
        width: 300px;
        text-align: center;
    }
    #warp .content li + li{
        margin-top: 1px;
    }
</style>
<body>
    <div id="warp">
        <div class="content">
            <p>动物</p>
            <ul>
                <li>猴子</li>
                <li>大象</li>
                <li>狮子</li>
            </ul>
        </div>
        <div class="content">
            <p>山川</p>
            <ul>
                <li>长江</li>
                <li>黄河</li>
                <li>井水</li>
            </ul>
        </div>
        <div class="content">
            <p>美女</p>
            <ul>
                <li>貂蝉</li>
                <li>西施</li>
                <li>秀秀</li>
            </ul>
        </div>      
    </div>
    <script>
        let oP = document.getElementsByTagName("p"),
aUl = document.getElementsByTagName("ul"),
index;
            console.log(oP.length);
            for(var i=0;i<oP.length;i++){
                oP[i].index = i;
                oP[i].onclick = function(){
                index = this.index;
                aUl[index].className = aUl[index].className === ""? "on" : "";
                console.log(i)
            }
        }
            
        
    </script>
</body>
</html>

tab下拉显示的更多相关文章

  1. tab下拉菜单

    这个想法早就有的 (写tab下拉菜单)就觉得自己对js不是很熟   所以一直没有写 花了不少时间 <!DOCTYPE html> <html> <head> < ...

  2. 完美解决，浏览器下拉显示网址问题 | 完美解决，使用原生 scroll 写下拉刷新

    在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...

  3. DataGridView单元格内容自动匹配下拉显示

    页面显示数据使用的控件是ComponentFactory.Krypton.Toolkit中的KryptonDataGridView控件.在指定“商品”单元格中需要根据用户输入内容自动匹配数据库中商品信 ...

  4. java简单的实现搜索框的下拉显示相关搜索功能

    最近做了一个简单的搜索框下面下拉显示相关搜索的功能,有点模仿百度的下拉展示相关搜索 先上个展示图 : 点击进入演示地址,大家可以输入长点的搜索,点击搜索,再输入之前搜索词的前面部分,看是否能展示出来 ...

  5. JQuery 简单的文字超出部分隐藏下拉显示

    HTML代码: <body> <div class="txt_bos"><!--在每一个放置文字的class外面包一个div,以便设置动画样式用,同样 ...

  6. js禁止微信浏览器下拉显示黑底查看网址，不影响内部Scroll

    开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图: 网上好多js禁止操作的做法禁止了内部Scroll,导致页面不能滚动,上拉加载失效,例如这种做法: ...

  7. RecyclerView上拉隐藏Toolbar,下拉显示

    RecyclerView下拉隐藏Toolbar,上拉显示效果图 先说个事:最近我准备做个开源的博客园android客户端!符合Google最新的material design设计风格的!不知道有没有小 ...

  8. [转]js禁止微信浏览器下拉显示黑底查看网址，不影响内部Scroll

    原贴:https://www.cnblogs.com/jasonwang2y60/p/6848464.html 原贴:https://www.cnblogs.com/jasonwang2y60/p/6 ...

  9. el-select和el-cascader的visible-change下拉框隐藏时触发相关事件（下拉框下拉显示时不触发）

    原文:https://blog.csdn.net/CarryBest/article/details/79959389 今天做项目时,用elementUI框架,需要下拉框隐藏时出发某个函数,用了vis ...

随机推荐

  1. jboss相关的术语

    1 jboss eap java ee application server.red hat官方版本. 2 jboss as/wildfly java ee application server的社区 ...

  2. mongodb配置复制集replset

    Mongodb的replication主要有两种:主从和副本集(replica set).主从的原理和mysql类似,主节点记录在其上的所有操作oplog,从节点定期轮询主节点获取这些操作,然后对自己 ...

  3. Linux/Android——input系统之 kernel层 与 frameworks层交互 (五)【转】

    本文转载自:http://blog.csdn.net/jscese/article/details/42291149 之前的四篇博文记录的都是linux中的input体系相关的东西,最底层以我调试的u ...

  4. socket listen backlog

    http://stackoverflow.com/questions/4253454/question-about-listening-and-backlog-for-sockets The list ...

  5. 英式英语 vs 美式英语

    0. 常见不同 日期的表达: 美国:月日年: 英国:日月年: 1. 发音 schedule,美 ['skɛdʒul],英 [ˈʃɛdjuːl] pecan,山核桃,英 ['piːk(ə)n;],美 [ ...

  6. cubism.js

    Cubism.js 是时间序列化的一个D3插件,使用Cubism构建更好的实时指示板,从Graphite,Cube 和其他的资源中拉拉取数据.在GitHub的Apache License上可以获取Cu ...

  7. uva10655

    Given the value of a+b and ab you will have to find the value of a n + b n Input The input file cont ...

  8. Mysql建表出现1005错误

    转自:http://blog.sina.com.cn/s/blog_757807f30100vz23.html 当在创建一个表时提示1005错误无法创建时,注意检查一下几点: 1.当此表有外键时,检查 ...

  9. Vue Router过渡动效

    <router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果: <transition> <router- ...

  10. HTML5牛刀小试

    第一周的HTML5苦逼之路,就这么简单,充实,忙碌的开始了,丝毫不敢有一丢丢懈怠,压力是有的,但更多的是对自己的信心,更是对自己的踏上苦逼之路的意志的肯定. 简单回顾了下这周所学内容.从认识HTML基 ...