html js点击字图片下拉,HTML+CSS项目实践五：使用纯CSS实现点击文字切换图片效果（不使用JS）...

实现效果：点击文字，切换到对应的图片显示。

如：点击文字1，切换到图片1，点击文字2，切换到图片2，点击文字3，切换到图片3。

 

 

实现思路：

1、制作一个div盒子，用来做展示图片的容器。因此盒子的宽高，要和待展示的图片盒子宽高一致。

2、将待展示的内容，放在同一个盒子里。通过文字触发，控制分别展示。(使用ul-li标签)

3、制作按钮文字，并控制点击不同文字时，待展示的内容不一样。

实现代码：

纯CSS实现点击按钮，切换图片

.slide{/*设置播放器盒子slide的样式*/

position: relative;

margin:10px auto;

w