jq 二级筛选切换

        .location_a {
            padding: 14px 0;
            height: 104px;
            background: lightblue;
        }

        .location_a dt {
            width: 48px;
            float: left;
            color: #aaa;
        }

        .location_a dd .item {
            padding: 0 6px;
            margin: 0 5px;
            line-height: 22px;
            display: inline-block;
            color: #333;
            text-decoration: none;
        }

        .location_a dd .item--active {
            border-radius: 2px;
            color: #fff !important;
            background: #f13232;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, .05);
        }

<!-- 筛选 -->
            <div class="location_a clearfix">
                <dl>
                    <dt>全部资料</dt>
                    <dd class="ziliao">
                        <a href="#" class="item item--active">SAT</a>
                        <a href="#" class="item">SAT知道</a>
                        <a href="#" class="item">SAT备考</a>
                    </dd>
                </dl>
                <div class="ziliaoList">
                    <dt>资料分类</dt>
                    <dd>
                        <a href="#" class="item item--active">全部</a>
                        <a href="#" class="item">阅读</a>
                        <a href="#" class="item">备考</a>
                        <a href="#" class="item">教材</a>
                    </dd>
                    <dd>
                        <a href="#" class="item item--active">全部</a>
                        <a href="#" class="item">政策动态</a>
                        <a href="#" class="item">入门常识</a>
                        <a href="#" class="item">考试指南</a>
                    </dd>
                    <dd>
                        <a href="#" class="item item--active">全部</a>
                        <a href="#" class="item">SAT资料</a>
                        <a href="#" class="item">备考计划</a>
                        <a href="#" class="item">复习攻略</a>
                        <a href="#" class="item">高分经验</a>
                    </dd>
                </div>
            </div>

<script type="text/javascript">
            $(".ziliaoList dd").css("display", 'none')
            $(".ziliaoList dd").eq(0).css("display", 'block')
            $(".ziliaoList dd").children(":first").eq(0).addClass("item--active")
            $(".ziliao .item").click(function() {
                var index = $(this).index();
                $(".ziliao .item").removeClass("item--active")
                $(this).addClass("item--active")
                $(".ziliaoList dd").css("display", 'none')
                $(".ziliaoList dd").eq(index).css("display", 'block')
                $(".ziliaoList dd .item").removeClass("item--active")
                $(".ziliaoList dd:eq("+index+") .item").eq(0).addClass("item--active")

            })
            $(".ziliaoList dd .item").click(function() {
                var index = $(this).index();
                $(".ziliaoList dd .item").removeClass("item--active")
                $(this).addClass("item--active")
            })
            //jq ajax 请求
            
            // $.ajax({
            //  type: "POST",
            //  url: "http://www.xiaoma.com/channel_ajax.php",
            //  data: {},
            //  async: true,
            //  dataType: "json",
            //  sucess: function(res) {
            //      console.log(res,'请求成功');
            //  },
            //  error: function(err) {
            //      console.log(err,'请求失败');
            //  }
            // });

        </script>

jq 二级筛选切换

原文：https://www.cnblogs.com/heson/p/11791121.html