通过点击LI，显示对应的DIV并隐藏其他DIV

<body>
        <ul class="point">
            <li><a href="#">menu0</a></li>
            <li><a href="#">menu1</a></li>
            <li><a href="#">menu2</a></li>
            <li><a href="#">menu3</a></li>
            <li><a href="#">menu4</a></li>
            <li><a href="#">menu5</a></li>
            <li><a href="#">menu6</a></li>
            <li><a href="#">menu7</a></li>
        </ul>
        <div class="box">
            <div class="con0">d0</div>
            <div class="con1">d1</div>
            <div class="con2">d2</div>
            <div class="con3">d3</div>
            <div class="con4">d4</div>
            <div class="con5">d5</div>
            <div class="con6">d6</div>
            <div class="con7">d7</div>
        </div>
    </body>

<style type="text/css">
        .point{
            float: left;
            list-style: none;
        }
        .point li{
            margin-bottom: 10px;
        }
        .box{
            float: right;
            margin-right: 500px;
        }
        .box div{
            width: 500px;
            height: 200px;
            border: 1px solid green;
            display: none;
        }
        .box .con0{
            display: block;
        }
    </style>

<script type="text/javascript">
        $(document).ready(function(){
            $(".point li a").click(function(){
                var order = $(".point li a").index(this);//获取点击之后返回当前a标签index的值
                $(".con" + order).show().siblings("div").hide();//显示class中con加上返回值所对应的DIV
            });
        })
    </script>

通过点击LI，显示对应的DIV并隐藏其他DIV

相关推荐