通過點擊LI，顯示對應的DIV並隱藏其他DIV

本文轉載自查看原文 2017-04-13 16:29 4152 jQeury

<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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 React 點擊按鈕顯示div與隱藏div 點擊按鈕隱藏和顯示div React 點擊按鈕顯示div與隱藏div，並給div傳children jquery點擊區域顯示或隱藏DIV,點擊非該DIV的地方隱藏該DIV jquery實現點擊控制div的顯示和隱藏點擊頁面其它地方將某個顯示的DIV隱藏 15點擊按鈕，設置div顯示和隱藏div jquery點擊按鈕顯示和隱藏DIv div/ a標簽的隱藏，顯示 div_隱藏顯示