<!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. mouse_event function

    https://msdn.microsoft.com/en-us/library/windows/desktop/ms646260(v=vs.85).aspx

  2. 二分lower_bound()与upper_bound()的运用

    <span style="color:#6633ff;">/* G - 二分 Time Limit:2000MS Memory Limit:32768KB 64bit ...

  3. 前端性能调优Gzip Filter

    转自:https://blog.csdn.net/zxk15982106569/article/details/18922613 客户端向web服务器端发出了请求后,通常情况下服务器端会将页面文件和其 ...

  4. 25.EXTJS 主页面的jsp

    1. /** * @author sux * @time 2011-1-11 * @desc main page */ var mainPage = Ext.extend(Ext.Viewport,{ ...

  5. bzoj 4756: [Usaco2017 Jan]Promotion Counting【dfs+树状数组】

    思路还是挺好玩的 首先简单粗暴的想法是dfs然后用离散化权值树状数组维护,但是这样有个问题就是这个全局的权值树状数组里并不一定都是当前点子树里的 第一反应是改树状数组,但是显然不太现实,但是可以这样想 ...

  6. bzoj3450 Easy(概率期望dp)

    3450: Tyvj1952 Easy Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 876  Solved: 648[Submit][Status] ...

  7. justify-content属性

    justify-content 用于设置或检索弹性盒子元素在主轴方向上的对齐方式. 属性值:flex-start 属性值:flex-end 属性值:center 属性值:space-between 属 ...

  8. 修复mysql的表

    数据损坏原因 MySQL表损坏一般是数据损坏,引起损坏的原因可能是由于磁盘损坏.系统崩溃或者MySQL服务器被崩溃等外部原因.例如有人使用kill -9终止进程,导致MySQL进程未能正常关闭,那么就 ...

  9. 洛谷 P1233 木棍加工

    题目描述 一堆木头棍子共有n根,每根棍子的长度和宽度都是已知的.棍子可以被一台机器一个接一个地加工.机器处理一根棍子之前需要准备时间.准备时间是这样定义的: 第一根棍子的准备时间为1分钟: 如果刚处理 ...

  10. [C++ STL] 迭代器(iterator)详解

    背景:指针可以用来遍历存储空间连续的数据结构,但是对于存储空间非连续的,就需要寻找一个行为类似指针的类,来对非数组的数据结构进行遍历.因此,我们引入迭代器概念.   一.迭代器(iterator)介绍 ...