zoukankan      html  css  js  c++  java
  • 横向文本框 index获取索引 和 eq 实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .hide{
                display: none;
            }
            .header{
                background-color: #eeeeee;
                height: 40px;
                width: 600px;
                margin: 0 auto;
    
            }
            .header .menu{
                float: left;
                border-right: 1px solid black;
                padding: 0 5px;
                line-height: 40px;
                cursor: pointer;
            }
            .content{
                height: 100px;
                border: 1px solid black;
                width: 600px;
                margin: 0 auto;
    
            }
            .active{
                background-color: #dddddd;
            }
    
        </style>
    </head>
    <body>
         <div class="header">
             <div class="menu" >菜单一</div>
             <div class="menu" >菜单二</div>
             <div class="menu" >菜单三</div>
         </div>
         <div class="content">
              <div class="hide" >内容一</div>
              <div class="hide" >内容二</div>
              <div class="hide" >内容三</div>
         </div>
    <script src="../jquery-2.12.4.js"></script>
    <script>
        $('.menu').click(function () {
            $(this).addClass('active');
            var tag = $(this).index();
            $('.content').children().eq(tag).removeClass('hide').siblings().addClass('hide')
    
        })
    </script>
    </body>
    </html>
  • 相关阅读:
    LTE
    LTE
    LTE
    LTE
    LTE DL-SCH and PDSCH Processing Chain
    LTE PDSCH Port 5 UE-Specific Beamforming
    推荐我的公众号
    GitHub Top 微信小程序
    深度前馈网络
    考研经历吐血总结
  • 原文地址:https://www.cnblogs.com/my-love-is-python/p/9309907.html
Copyright © 2011-2022 走看看