本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。
在css中,可以使用“:target”选择器,配合display属性来实现点击按钮切换图片,只需要给元素设置“元素:target{display:block;}”语句即可。“:target”选择器可用于选取当前活动的目标元素。
本教程操作环境:windows7系统、HTML5&&CSS3版,DELL G3电脑。
今天使用CSS中的:target选择器来实现点击按钮切换相对应的图片的demo,此demo也可以使用JS来实现。
demo的结构:
1 2 3 4 5 6 7 8 | <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样式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <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实现点击按钮切换图片的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css文本框如何去掉边框
css中before的用法是什么
css grid布局的优缺点是什么?
css如何修改字体大小
css怎么去掉输入框的边框
css怎么设置tr间距
css怎么隐藏table
css里怎样调节字体颜色
css怎么设置text不可编辑
css怎么实现对话框
更多相关阅读请进入《:target》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 如何只用css实现点击按钮切换图片