实现切换：

方法一：

$(function(){

// $("#ypzw").hide();

// $("#gzjy").hide();

// $("#xzyq").hide();

// $("#gzdd").hide();

// $("#one").click(function() {

// $("#ypzw").toggle();

// $("#one").addClass("active");

// $("#two").removeClass("active");

// $("#three").removeClass("active");

// $("#four").removeClass("active");

// $("#gzjy").hide();

// $("#xzyq").hide();

// $("#gzdd").hide();

// })

// $("#two").click(function() {

//

// $("#two").addClass("active");

// $("#one").removeClass("active");

// $("#three").removeClass("active");

// $("#four").removeClass("active");

// $("#gzjy").toggle();

// $("#ypzw").hide();

// $("#xzyq").hide();

// $("#gzdd").hide();

// })

// $("#three").click(function() {

//

// $("#three").addClass("active");

// $("#two").removeClass("active");

// $("#one").removeClass("active");

// $("#four").removeClass("active");

// $("#xzyq").toggle();

// $("#ypzw").hide();

// $("#gzjy").hide();

// $("#gzdd").hide();

// })

// $("#four").click(function() {

// $("#four").click(function() {

// $("#four").addClass("active");

// $("#three").removeClass("active");

// $("#two").removeClass("active");

// $("#one").removeClass("active");

// $("#gzdd").toggle();

// $("#ypzw").hide();

// $("#gzjy").hide();

// $("#xzyq").hide();

// })

//

// })

方法2

html:

<div class="nav">

<div class="navbar active">职位</div>

<div class="navbar">经验</div>

<div class="navbar">工资</div>

<div class="navbar">地点</div>

</div>

//顺序和上面一样

<div class="tan_chuang_a" style="display: flex; flex-direction: column;">

<div class="ws">

职位弹窗

</div>

</div>

<div class="tan_chuang_a" style="display: flex; flex-direction: column;">

<div class="ws">

经验弹窗

</div>

</div>

<div class="tan_chuang_a" style="display: flex; flex-direction: column;">

<div class="ws">

工资弹窗

</div>

</div><div class="tan_chuang_a" style="display: flex; flex-direction: column;">

<div class="ws">

地点弹窗

</div>

</div>

JS:

$(function() {

$('.tan_chuang_a').hide();

$(".nav .navbar").click(function(e) {

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

$(this).addClass('active').siblings('.navbar').removeClass('active');

$('.tan_chuang_a').eq(i).toggle().siblings('.tan_chuang_a').hide();

})

})

 

 

 

方法3：

HTML：

<div class="tan_chuang_a" style="display: flex; flex-direction: column;">

<div >

<span id="jy_0"    οnclick="jy_data(0);">不限</span>

<span id="jy_1" οnclick="jy_data(1);">无经验</span>

<span id="jy_2" οnclick="jy_data(2);">1-3年</span>

</div>

JS：

function jy_data(id){

$("jy_"+id).css("color":"red");

$("jy_"+id).siblings("span").css("color":"#00");

}

}