<!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. SQLServer2012连接数据库报错

    尝试读取或写入受保护的内存 这通常指示其他内... CMD 输入 netsh winsock reset,重启计算机即可

  2. Spring Boot Controller

    接上篇文章.HelloWorld程序中我们已经创建了一个HellController,里面包括了响应JSON的方法.本文针对Controller再做一下解说. 回想上篇文章,我们在Controller ...

  3. finger的使用

    finger命令用来查询一台主机上的登录账号的信息,通常会显示用户名.主目录.停滞时间.登录时间.登录Shell等信息,使用权限为所有用户. 安装 sudo apt-get install finge ...

  4. [测试]单元测试框架NUnit

    说到测试,相信大家都或多或少了解. 按照各自分类,就自己知道包括 A.单元测试.集成测试.系统测试 B.白盒测试.黑盒测试 C.压力测试.性能测试.安全测试 ...... 反正是太多太多.就做开发以来 ...

  5. shell判断文件,目录是否存在或者具有权限 (转载)

    转自:http://cqfish.blog.51cto.com/622299/187188 文章来源:http://hi.baidu.com/haigang/blog/item/e5f582262d6 ...

  6. 【懒人专用系列】Xind2TestCase的初步探坑

    公司最近说要弄Xind2TestCase,让我们组先试用一下 解释:https://testerhome.com/topics/17554 github项目:https://github.com/zh ...

  7. win10家庭版添加本地账户方法

    1.正常情况下,windows的使用者都习惯于用本地用户及用户组工具来创建新用户,如下图所示,在win10的开始窗口右侧的空白处,输入lusrmgr.msc 打开本地用户管理控制台. 2.在win10 ...

  8. SimpleDataFormat详解

    [转]SimpleDateFormat使用详解 public class SimpleDateFormat extends DateFormat SimpleDateFormat 是一个以国别敏感的方 ...

  9. Flume中的flume-env.sh和log4j.properties配置调整建议(图文详解)

    GC是内存的回收的意思. Flume中的flume-env.sh配置调整建议 [hadoop@master conf_HostInterceptor]$ pwd /home/hadoop/app/fl ...

  10. spring-redis-data的一个坑

    事故原因: 运维报告redis内存直线上升,然后查询发现都是setrange操作,review代码,没法发现setrange操作 代码如下: redisTemplate.opsForValue().s ...