1. 程式人生 > >js點選切換div內容

js點選切換div內容

css:設定div為絕對定位

    ul {
        display: flex;
        list-style-type: none
    }

    div {
        width: 200px;
        height: 200px;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

html:

    <ul class="navInfo">
        <li class="navLi">流程一</li>
        <div class="navDiv">內容一</div>
        <li class="navLi">流程二</li>
        <div class="navDiv">內容二</div>
        <li class="navLi">流程三</li>
        <div class="navDiv">內容三</div>
    </ul>

js:

    <script>
        $(function () {
            $(".tabs-process").css("display", "none");
            $(".tabs-title").click(function () {
                var obj = $(this).next(".tabs-process");
                $(obj).show("")
                $(obj).siblings(".tabs-process").each(function () {
                    $(this).hide()
                })
            })
        })
    </script>