点击文字显示相对应的图片

1：先设置一个装按钮的“盒子”，因为这样方便设置按钮的居中和一些其他样式，在HTML中设置相对应点击按钮，给这几个按钮设置一个共同的div，方便设置他们的共同样式，给他们的共同div设置样式：宽设为100，高40，再把他们的边框隐藏，设置一个5px的圆角，再稍微把字体弄大一点，
按钮效果截图：

2：再给第一个按钮背景颜色为红色，字体颜色为蓝色，第二个背景颜色为蓝色，字体颜色为黄色，第三个背景颜色为黄色，字体颜色为红色

3：设置一个装图片的容器，给这个装图片的容器里面放一些img标签，放几张图片进去，再给这个容器设置它的样式：宽400，高也400，然后也让这个容器跟跟装按钮的容器一样居中，再让它别挨着装按钮的盒子，把盒子里面的图片的大小都设置为高400，宽400，再设置10px的倒角，把这些都设置完成以后我们就可以看到这样一个效果：
缩小浏览器以后的效果截图

4：为了让我们实现点击按钮才会出现图片的效果，我们把三张图片都隐藏起来，这样就只剩按钮了，然后我们去JavaScript中设置点击事件，先给这三个按钮设置ID，以便于我们在JavaScript中去获取到这个按钮，当我们获取到这个按钮以后我们去给这几个按钮设置点击事件，比如当我们点击图片1时便显示第一张图片，然后隐藏第二，三张图片，同理，当我们点击第二张图片时便显示第二张图片，隐藏第一，三张图片，点击第三张图片时就显示第三张图片，隐藏第一，二张图片
JavaScript代码截图

然后我们就可以完成这样一个点击相对应的文字显示相对应的图片了。