如何只用css实现点击按钮切换图片

在css中，可以使用“:target”选择器，配合display属性来实现点击按钮切换图片，只需要给元素设置“元素:target{ display:block; } ”语句即可。“:target”选择器可用于选取当前活动的目标元素。

本教程操作环境：windows7系统、HTML5& & CSS3版，DELL G3电脑。

今天使用CSS中的:target选择器来实现点击按钮切换相对应的图片的demo，此demo也可以使用JS来实现。

demo的结构：

        a href="#img1">
    img1/a>
    	a href="#img2">
    img2/a>
    	a href="#img3">
    img3/a>
    	a href="#img4">
    img4/a>
    	p id="img1">
    img src="img/p001.jpg"/>
    /p>
    	p id="img2">
    img src="img/p002.jpg"/>
    /p>
    	p id="img3">
    img src="img/p003.jpg"/>
    /p>
    	p id="img4">
    img src="img/p004.jpg"/>
    /p>
    

demo的CSS样式：

style>
	a{
    		padding:5px 10px;
    		border:1px solid #000;
    		color:#fff;
    		background-color:#888;
    		text-decoration:none;
	}
	p{
    		width:400px;
    		height:400px;
    		border:2px solid #ccc;
    		margin-top:20px;
    		posITion:absolute;
    		top:20px;
    		left:10px;
    		display:none;
    		padding:20px;
	}
	p:target{
    		display:block;
	}
      /style>
    

运行的效果：

相关学习推荐：css教程

以上就是如何只用css实现点击按钮切换图片的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！