原生js jq选项卡

html

    <div class="regardc">

        <div class="gw_b_box2">

            <div class="gw_box_tit2 on">

                <span class="sh3mabouth7">Staff</span>

            </div>

            <div class="gw_box_tit2">

                <span class="sh3mabouth7">Faculty</span>

            </div>

        </div>

        <div class="regardc_list">

            <div class="regardc_item1 on">

                <li class="regardc_li">

                    1

                </li>

            </div>

            <div class="regardc_item1">

                <li class="regardc_li">

                    2

                </li>

            </div>

        </div>

    </div>

 

css

    <style>

        .gw_b_box2 {

            display: flex;

            justify-content: center;

            align-items: center;

        }

        .gw_box_tit2 {

            width: 120px;

            text-align: center;

            margin-right: 30px;

            border-radius: 5px;

        }

        .gw_box_tit2.on {

            background: #8d2893;

            color: #fff;

        }

        .gw_box_tit2:hover {

            cursor: pointer;

        }

        .regardc_item1 {

            display: none;

        }

        .regardc_item1.on {

            display: block;

        }

        .regardc_li {

            width: 24%;

            margin-top: 10px;

            display: inline-block;

        }

    </style>

 

js

 

    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>

    <script>

        $(".regardc .gw_box_tit2").click(function () {

            var index = $(this).index();

            $(this).parent().siblings().children().eq(index).addClass("on").siblings().removeClass("on");

        });

        $('.regardc .gw_box_tit2').click(function () {

            var index = $(this).index();

            $('.regardc .gw_box_tit2').removeClass('on').eq(index).addClass('on');

        })

    </script>