zoukankan      html  css  js  c++  java
  • 前端-选项卡(菜单栏)

    项目中要用到选择卡这种思路,所以事先自己做了个demo,仅供参考:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8" />
            <title></title>
            <style>
                * {
                    margin: 0;
                    padding: 0;
                }
                
                .main {
                     600px;
                    margin: 100px auto;
                }
                
                .clearfix:after {
                    content: '';
                    display: table;
                    clear: both;
                }
                
                .clearfix {
                    zoom: 1;
                }
                
                ul {
                    list-style: none;
                }
                
                li {
                    float: left;
                     100px;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                }
                li.active{
                    background: #ddd; //.active是一个class类
                }
                .main-content{
                    margin-top: 40px;
                }
                
                .main-content .box {
                     400px;
                    height: 400px;
                    margin: 0 auto;
                    border: 1px solid #ddd;
                    display: none;
                }
                .main-content .box.active{
                    display: block;
                }
            </style>
        </head>
    
        <body>
            <div class="main">
                <ul class="clearfix list">
                    <li class="active">
                        <a href="javascript:;">菜单1</a>
                    </li>
                    <li>
                        <a href="javascript:;">菜单2</a>
                    </li>
                    <li>
                        <a href="javascript:;">菜单3</a>
                    </li>
                    <li>
                        <a href="javascript:;">菜单4</a>
                    </li>
                    <li>
                        <a href="javascript:;">菜单5</a>
                    </li>
                    <li>
                        <a href="javascript:;">菜单6</a>
                    </li>
                </ul>
    
                <div class="main-content">
                    <div class="box active">1</div>
                    <div class="box">2</div>
                    <div class="box">3</div>
                    <div class="box">4</div>
                    <div class="box">5</div>
                    <div class="box">6</div>
                </div>
            </div>
        </body>
        <script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script>
        <script>
            $(function(){
                $('.list li').on('click',function(){
                    $('.list li').removeClass('active');     
                    $(this).addClass('active');       
                    $('.main-content .box').removeClass('active');   
                    $('.main-content .box').eq($(this).index()).addClass('active'); 
                })
            })
        </script>
    </html>
  • 相关阅读:
    Jquery简略API使用
    JS全部API笔记
    实现nginx的负载均衡和反向代理
    HashMap在Java1.7与1.8中的区别
    数据库设计三大范式
    Java集合
    Object类有哪些方法
    spring mvc出现 Failed to convert property value of type 'java.lang.String' to required type 'java.util.Date' for property 'endtime'
    int和Integer的区别
    第二次面试-科大讯飞(卒)
  • 原文地址:https://www.cnblogs.com/caojiayan/p/5934242.html
Copyright © 2011-2022 走看看