python：模态编程框 | 模态编程框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

   <style>

        .hide{

            display: none;

        }

        .menu{

            height: 38px;

            background-color: #eeeeee;

            line-height: 38px;

        }

        .active{

            background-color: brown;

        }

        .menu .menu-item{

            float: left;

            border-right: 1px solid red;

            padding: 0 5px;

            cursor: pointer;

        }

        .content{

            min-height: 100px;

            border: 1px solid #eeeeee;

        }

    </style>

</head>

<body>

  <div style="width: 700px;margin:0 auto">

        <div class="menu">

            <div  class="menu-item active" >菜单一</div>

            <div  class="menu-item" >菜单二</div>

            <div  class="menu-item" >菜单三</div>

        </div>

        <div class="content">

            <div >内容一</div>

            <div class="hide" >内容二</div>

            <div class="hide">内容三</div>

        </div>

    </div>

<script src="jquery-1.12.4.js"></script>

<script>

       $('.menu-item').click(function () {

         $(this).addClass('active').siblings().removeClass('active');

//           var res=$(this).index()

//           var tes=$('.content').children(res)

//           console.log(tes)

//           获取索引位置

           $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');

    });

</script>

</body>

</html>
模态编程框