html网页制作如何实现下面效果

Question

如何利用css或者JavaScript实现下面的效果：

开始样式是这样：

点击一下“教工活动”后，教工活动样式以及下面的图片就发生变化：

最后再点击一下“学生活动”，样式又变回来：

Answer 1

点击顶部文字，切换图片路径或者使用display：none切换图片的显示状态，让另一个隐藏一个显示即可