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

案例1:实现元素的切换

HTML:

<div id="box">
  <a href="#a" id="a">
    <p>我是P1的内容</p>
  </a>
  <a href="#b" id="b">
    <p>我是P2的内容</p>
  </a>
</div>

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;
}

效果

点击后成这样。

再次点击

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

#box>a:first-of-type{
  display:block;
}

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

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

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

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

HTML:

<ul class="tabs">
  <li><a href="#tab1">标签一</a></li>
  <li><a href="#tab2">标签二</a></li>
  <li><a href="#tab3">标签三</a></li>
</ul>
<div id="tab1" class="tab_content">
  tab1
</div>
<div id="tab2" class="tab_content">
  tab2
</div>
<div id="tab3" class="tab_content">
  tab3
</div>

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实现点击事件及实践的更多相关文章

  1. 纯CSS实现点击事件展现隐藏div菜单列表/元素切换

    在写移动端导航的时候经常用到点击按钮出现/隐藏导航条的情况,最常见的方法当然还是前端框架直接调用,省心省力,不易出错:当然还有使用纯JS实现的小代码段.我这里整理了纯CSS实现方式,给需要的人和给自己 ...

  2. css 禁止点击事件触发

    鼠标不可点击主要是两种表现: 1.鼠标不可点击时的显示状态 cursor: not-allowed 2.禁止触发点击事件 pointer-events:none

  3. 纯css实现点击事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. css处理事件透过、点击事件透过

    // 执行一些动作... $("#myModal2").css("pointer-events","none"); // 执行一些动作... ...

  5. css禁用鼠标点击事件

    css禁用鼠标点击事件 .disabled { pointer-events: none; } <div class="main-container disabled"> ...

  6. 项目遇到的小问题(关于vue-cli中js点击事件不起作用和iconfont图片下载页面css样式乱的解答)

     第一个:关于vue-cli中js点击事件不起作用 在vue的methods方法queryBtnFun()中拼接html和click操作事件的时候,发现点击事件一起未起作用: 后来发现是DOM执行顺序 ...

  7. 小程序实践(五):for循环绑定item的点击事件

    微信展示列表效果借助于 wx:for  简单写一个列表(wxml文件中): 对应的数据源(js文件中): 写一个点击监听: 效果: 以上.可以实现列表的item点击效果,但是无法到点击的item对应的 ...

  8. CSS伪类选择器active模拟JavaScript点击事件

    一.说明 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active. 另:如果需要给超链接定义:访问前 ...

  9. CSS 解决z-index上层元素遮挡下层元素点击事件问题

    解决z-index上层元素遮挡下层元素点击事件问题 by:授客 QQ:1033553122 开发环境 Win 10 element-ui  "2.8.2" Vue 2.9.6 需求 ...

随机推荐

  1. [LeetCode] 435 Non-overlapping Intervals

    Given a collection of intervals, find the minimum number of intervals you need to remove to make the ...

  2. easyconf——基于AugularJS的配置管理系统开发框架

    目录 1 easyconf的诞生2 easyconf的设计理念 2.1 总体设计 2.2 细节设计 2.2.1 CRUD操作 2.2.2 即时校验 2.2.3 下拉框设计3 easyconf使用指南 ...

  3. DOM基础

    DOM(Document Object Model)即文档对象模型,针对HTML 和XML 文档的API(应用程序接口).DOM 描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分. ...

  4. P1905生活大爆炸版 石头剪刀布

      P1905生活大爆炸版 石头剪刀布 描述 石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头.如果两个人出拳一 样,则不分胜负.在<生活大爆炸>第二季第 8 集中出现了一种石头 ...

  5. 如何参与Linux内核开发(转)

    本文来源于linux内核代码的Document文件夹下的Hoto文件.Chinese translated version of Documentation/HOWTO If you have any ...

  6. Java中if语句,嵌套使用 一道面试题

    偶然看到这道题,起初还迷糊了,特此记录 int a = 100;if(a < 100) if(a < 200){ System.out.println("a < 200&q ...

  7. LintCode 111 Climbing Stairs

    这道题参考了这个网址: http://blog.csdn.net/u012490475/article/details/48845683 /* 首先考虑边界情况,当有1层时,有一种方法. 然后再看2层 ...

  8. nginx实时记录请求状态信息( ngx_realtime_request_module)

    cd /usr/local/src/ wget "http://nginx.org/download/nginx-1.4.2.tar.gz" tar -xzvf nginx.tar ...

  9. 扫描二维码判断移动设备(Android/ios),以及判断是否微信端扫描

    <section class="download"> <a href="apk地址" class="android" st ...

  10. Metro UI 菜单(Winform)

    我有个项目需要要到菜单导航,就自己动作做了一个,感觉还可以,分享给大家.下载地址:http://files.cnblogs.com/files/dyj057/MetroUIMenu.zip 主要代码: ...