背景：頁面數(shù)據(jù)由后臺(tái)渲染
需求：篩選條件課程類目矗漾、是否收費(fèi)锈候、課程類型（線上、線下）敞贡，三個(gè)參數(shù)泵琳，要求點(diǎn)擊對(duì)應(yīng)選項(xiàng)通過地址欄傳參篩選數(shù)據(jù)。

 <div class="filterBox">
        <div class="cate-tab flex_between">
            <div class="cate-item pointer" data-CategoryId="">全部課程</div>
            @foreach (var item in CourseCategoryList)
            {
                <div data-CategoryId="@item.CategoryId" class=" cate-item pointer"> @item.CategoryName</div>
            }
        </div>
        <div class="opt-tab flex_between">
            <a class="isFree pointer active" data-IsFree="">全部</a>
            <a class="isFree pointer" data-IsFree="0">付費(fèi)</a>
            <a class="isFree pointer" data-IsFree="1" >免費(fèi)</a>
            <div class="line"></div>
            <a class="type pointer" data-Type="">全部</a>
            <a class="type pointer" data-Type="1">線上</a>
            <a class="type pointer" data-Type="2">線下</a>
        </div>
    </div>

   getUrlParams();         //獲取地址欄參數(shù)嫡锌，存成對(duì)象
    initStyle('IsFree');      //根據(jù)地址欄參數(shù)高亮當(dāng)前頁面所選的篩選項(xiàng)
    initStyle('CategoryId');
    initStyle('Type');
    $('.cate-item').on('click', (e) => {        //選項(xiàng)點(diǎn)擊事件虑稼，更新對(duì)應(yīng)參數(shù)值，并跳轉(zhuǎn)
        changeParams('CategoryId',e)
    })
    $('.type').on('click', (e) => {
        changeParams('Type',e)
    })
    $('.isFree').on('click', (e) => {
        changeParams('IsFree',e)
    })

function getUrlParams() {
    let paramsArr = paramString.replace('?','').split('&')
    if(paramString){
        paramsArr.map(i=>{
            let key = i.split('=')[0]
            let value = i.split('=')[1]
            paramsObj[key] = value
            return i
        })   
    }
}

function initStyle(key){
    let $keyDom = $(`[data-${key}]`)
    if(key in paramsObj){
        for(let i=0;i<$keyDom.length;i++) {
            $keyDom.eq(i).removeClass('active')
            if($keyDom.eq(i).attr(`data-${key}`)===paramsObj[key]){
                $keyDom.eq(i).addClass('active')
            }
        }
    }else{
        $(`[data-${key}=""]`).addClass('active')
    }
}
function changeParams(dataKey, e) {
    let key = $(e.currentTarget).attr(`data-${dataKey}`)
    if (!paramString) {                  //url無參數(shù)
        location.href = location.pathname + '?' + dataKey + '=' + key   //加第一個(gè)參數(shù)
    } else if (dataKey in paramsObj) {   //有參數(shù)势木，點(diǎn)擊的參數(shù)是否已有
        if (key) {                       //已有且新選屬性值key不為空則替換
            paramsObj[dataKey] = key     
        } else {                         
            delete paramsObj[dataKey]    //key為空則刪除該屬性
        }
        //更新后將已有參數(shù)拼成url
        let keyArr = Object.keys(paramsObj)
        let valArr = Object.values(paramsObj)
        let pArr = []
        for (let k = 0; k < keyArr.length; k++) {
            pArr[k] = keyArr[k] + '=' + valArr[k]
        }
        let newLink = ''
        if (pArr.length > 0) { 
            newLink = '?' + pArr.join('&')  //如果有參數(shù) 拼起來
        }
        location.href = location.pathname + newLink   //沒有蛛倦，添加在后面
    } else {
        location.href = location.href + '&' + dataKey + '=' + key
    }
}

實(shí)現(xiàn)效果