CSS实现点击事件及实践

  • 时间:2018-12-21 23:10 作者:程序员小新人学习 来源:程序员小新人学习 阅读:372
  • 扫一扫,手机访问
摘要:实现原理利用:target,把a标签自身的href以及id设置成一样的。案例1:实现元素的切换HTML: 我是P1的内容 我是P2的内容 CSS:body,div{ margin:0; padding:0;}#box>a{ display:none;}#box>a:first-of-type{

实现原理利用:target,把a标签自身的href以及id设置成一样的。

案例1:实现元素的切换

HTML:

CSS:

body,div{

margin:0;

padding:0;

}

#box>a{

display:none;

}

#box>a:first-of-type{

display:block;

}

#box>a:target{

display:none;

}

#box>a:target + a{

display:block;

}

效果

CSS实现点击事件及实践

点击后成这样。

CSS实现点击事件及实践

再次点击

CSS实现点击事件及实践

实现的原理就是先让所有的a标签隐藏,让第一个显示,当点击的时候让自己隐藏让它的下一个兄弟元素显示,其实这里有个坑,一开始实现这个效果的时候我以为会出问题,其实光这句话是不够的,刚刚碰巧我使用了

#box>a:first-of-type{

display:block;

}

其实很关键,由于+号是匹配不了它的上一个兄弟元素的,不太好解释,自己去想吧。

案例2:通过点击事件结合模拟父元素选择器使用可以看这篇文章:CSS中模拟父元素选择器

案例3:利用target制作的tab切换可以看这篇文章:CSS3选择器的研究,案例 ctrl+f 搜索target

另外一种tab的实现,通过结合z-index

HTML:

tab1

tab2

tab3

CSS:

.tab_content {

border: 1px solid #ccc;

background: #fff;

padding: 20px;

height: 250px;

position: absolute;

top: 150px;

left: 0;

width: 600px;

}

div:first-of-type{

z-index:1;

}

div:target{

z-index:1;

}

效果:

CSS实现点击事件及实践

当然还有其余可以做的,暂时没想到,有新想法再升级。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】极客时间-数据分析实战45讲【完结】(2021-09-02 16:26)
【系统环境|windows】字节跳动前台面试题解析:盛最多水的容器(2021-03-20 21:27)
【系统环境|windows】DevOps敏捷60问,肯定有你想理解的问题(2021-03-20 21:27)
【系统环境|windows】字节跳动最爱考的前台面试题:JavaScript 基础(2021-03-20 21:27)
【系统环境|windows】JavaScript 的 switch 条件语句(2021-03-20 21:27)
【系统环境|windows】解决 XML 数据应用实践(2021-03-20 21:26)
【系统环境|windows】20个编写现代CSS代码的建议(2021-03-20 21:26)
【系统环境|windows】《vue 3.0探险记》- 运行报错:Error:To install them, you can run: npm install --save core-js/modules/es.arra...(2021-03-20 21:24)
【系统环境|windows】浅谈前台可视化编辑器的实现(2021-03-20 21:24)
【系统环境|windows】产品经理入门迁移学习指南(2021-03-20 21:23)
手机二维码手机访问领取大礼包
返回顶部