Javascript 替换列表的按钮

我试图在单击按钮时，将每个不同部分下的

2017

事件替换为

2018

事件，反之亦然，以便在每个事件下一次只显示一个列表。我知道有些事情不对，但我想不出来。请告诉我如何使这些按钮工作好吗

$（文档）.ready（函数（）{
var v=假；
$（“按钮#2018b”）。单击（函数（）{
如果（v==false）{
v=真；
}
})；//结束按钮
$（“按钮#2017b”）。单击（函数（）{
如果（v==true）{
v=假；
}
})；//结束按钮
}); //结束文件准备就绪
//$（“2017”。替换为（“
”）；
//$（“2018”。替换为（“
”）；

.panel{
显示：无；
}
保险商实验室{
列表样式类型：无；
}
钮扣{
左边距：180像素；
}

福克斯山谷跑步俱乐部

未来事件-2018
2017年时事



5k/10k赛事
5k/10赛事

迷你短跑
铁马
暮光之路

5K/10K赛事

雪球冲刺
1/14/18
蚊子山
新伦敦
冬季勇士
2018年6月2日
海湾海滩
绿湾
Big Chill Run
2018年2月24日
中谷高尔夫球场
De Pere



半程马拉松比赛
半程马拉松比赛

福克斯河马拉松
N.E.W.半程马拉松
温尼贝戈跑步

半程马拉松比赛

寒冷的室内马拉松比赛2018年1月15日
情人节跑步
2018年2月12日
绿岛公园
De Pere
雪球马拉松2018年3月3日



全程马拉松比赛
全程马拉松比赛

奶酪头马拉松
环湖马拉松
福克斯城市马拉松

全程马拉松比赛

开拓者马拉松比赛2018年2月4日
越狱马拉松2018年4月16日梅诺米尼公园
Cellcom马拉松
2018年5月20日
伦巴第中庭
绿湾

FV跑步者
.小组{
显示：无；
}
保险商实验室{
列表样式类型：无；
}
钮扣{
左边距：180像素；
}
福克斯山谷跑步俱乐部

未来事件-2018
2017年时事



5k/10k赛事
5k/10赛事

迷你短跑
铁马
暮光之路

5K/10K赛事

雪球冲刺
1/14/18
蚊子山
新伦敦
冬季勇士
2018年6月2日
海湾海滩
绿湾
Big Chill Run
2018年2月24日
中谷高尔夫球场
De Pere



半程马拉松比赛
半程马拉松比赛

福克斯河马拉松
N.E.W.半程马拉松
温尼贝戈跑步

半程马拉松比赛

寒冷的室内马拉松比赛2018年1月15日
情人节跑步
2018年2月12日
绿岛公园
De Pere
雪球马拉松2018年3月3日



全程马拉松比赛
全程马拉松比赛

奶酪头马拉松
环湖马拉松
福克斯城市马拉松

全程马拉松比赛

开拓者马拉松比赛2018年2月4日
越狱马拉松2018年4月16日梅诺米尼公园
Cellcom马拉松
2018年5月20日
伦巴第中庭
绿湾

$（文档）.ready（函数（）{
var v=假；
$（“按钮#2018B”）。单击（函数（）{
$（“.2017”）.hide（）；
美元（“.2018”）.show（）；
})；//结束按钮
$（“按钮#2017B”）。单击（函数（）{
$（“.2018”）.hide（）；
$（“.2017”）.show（）；
})；//结束按钮
})；//结束文档准备就绪

备注

将

设置为相应的

<button id="show-event">Event</button>
<div id="event"></div>

按钮{
大纲：无；
}
.主动{
边框：1px实心橙色；
}
div[id^=events-]{
显示：无；
}
.表演{
显示：块！重要；
}

事件
2016
2017
2018

2016年事件1
2016年事件2
2016年事件3


2017年活动1
2017年活动2
2017年活动3


2018年活动1
2018年活动2
2018年活动3

无法理解问题。您能解释得更清楚些吗？是否要隐藏所有问题