问题背景:使用纯 CSS 方案,实现导航栏tab切换

  实现 Tab 切换的难点在于如何使用 CSS 接收到用户的点击事情并对相关的节点进行操作。即是:

  1. 如何接收点击事件
  2. 如何操作相关DOM

  下面看看如何使用两种不同的方法实现需求,通过这2种方法还是可以学到不少东西的。

一、:target伪类选择器

  :target 是 CSS3 新增的一个伪类,可用于选取当前活动的目标元素。当然 URL 末尾带有锚名称 #,就可以指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。它需要一个 id 去匹配文档中的 target 。

  假设我们的 HTML 代码如下

<ul class="nav">
<li>列表1</li>
<li>列表2</li>
</ul>
<div>列表1内容:</div>
<div>列表2内容:abcdefgkijkl</div>

  由于要使用 :target,需要 HTML 锚点,以及锚点对应的 HTML 片段。所以上面的结构要变成:

<ul class="nav">
<li><a href="#content1">列表1</a></li>
<li><a href="#content2">列表2</a></li>
</ul>
<div id="content1">列表1内容:</div>
<div id="content2">列表2内容:abcdefgkijkl</div>

  这样,上面 <a href="#content1"> 中的锚点 #content1 就对应了列表1 <div id="content1"> 。锚点2与之相同对应列表2。

  接下来,我们就可以使用 :target 接受到点击事件,并操作对应的 DOM 了:

#content1,
#content2{
display:none;
} #content1:target,
#content2:target{
display:block;
}

  上面的 CSS 代码,一开始页面中的 #content1 与 #content2 都是隐藏的,当点击列表1触发href="#content1" 时,页面的 URL 会发生变化:

  1. 由 www.example.com 变成 www.example.com#content1
  2. 接下来会触发 #content1:target{ } 这条 CSS 规则,#content1 元素由 display:none 变成display:block ,点击列表2亦是如此。

  如此即达到了 Tab 切换。当然除了 content1 content2 的切换,我们的 li 元素样式也要不断变化,这个时候,就需要我们在 DOM 结构布局的时候多留心,在 #content1:target 触发的时候可以同时去修改 li 的样式。

  在上面 HTML 的基础上,再修改一下,变成如下结构:

<div id="content1">列表1内容:</div>
<div id="content2">列表2内容:abcdefgkijkl</div>
<ul class="nav">
<li><a href="#content1">列表1</a></li>
<li><a href="#content2">列表2</a></li>
</ul>

  仔细对比一下与上面结构的异同,这里我只是将 ul 从两个 content 上面挪到了下面,为什么要这样做呢?因为这里需要使用兄弟选择符 ~ 。

  E~F{ cssRules } ,CSS3 兄弟选择符(E~F) ,选择 E 元素后面的所有兄弟元素 F。

  注意这里,最重要的一句话是 E~F 只能选择 E 元素 之后 的 F 元素,所以顺序就显得很重要了。

  在这样调换位置之后,通过兄弟选择符 ~ 可以操作整个 .nav 的样式。

#content1:target ~ .nav li{
...
}
#content2:target ~ .nav li{
...
}

  上面的 CSS 规则中,我们使用 ~ 选择符,在 #content1:target 和 #content2:target 触发的时候分别去控制两个导航 li 元素的样式。

二、<input type="radio"> && <label for="">

  上面的方法通过添加 <a> 标签添加页面锚点的方式接收点击事件。这里还有一种方式能够接收到点击事件,就是拥有 checked 属性的表单元素, <input type="radio"> 或者<input type="checkbox"> 。

  假设有这样的结构:

<input class="nav1" type="radio">

<ul class='nav'>
<li>列表1</li>
</ul>

  对于上面的结构,当我们点击 <input class="nav1" type="radio"> 单选框表单元素的时候,使用 :checked是可以捕获到点击事件的。

.nav1:checked ~ .nav li {
// 进行样式操作,同样用到了兄弟选择器
}

  但是,这里有个问题 我们的 Tab 切换,要点击的是<li>元素,而不是表单元素,所以这里很重要的一点是,使用 <label for=""> 绑定表单元素。看看如下结构:

<input class="nav1" id="li1" type="radio">

<ul class='nav'>
<li><label for="li1">列表1</label></li>
</ul>

  通过使用 <label> 包裹一个 <li> 元素,而 <label> 有一个属性 for 可以绑定一个表单元素。

  上面的 <li> 中,有一层 <label for="li"> ,里面的 for="li1" 意思是绑定 id 为li1 的表单元素。

  label 标签中的 for 定义:for 属性规定 label 与哪个表单元素绑定。

  这样改造之后,当我们点击 <li> 元素的时候,相当于点击了 <input class="nav1" id="li1" type="radio">这个单选框表单元素,而这个表单元素被点击选中的时候,又可以被 :checked 伪类捕获到。这个时候,我们就可以将页面上的表单元素隐藏,做到点击 <li> 相当于点击表单:

  应用到本题目,我们应该建立如下 DOM 结构:

<div class="container">
<input class="nav1" id="li1" type="radio" name="nav">
<input class="nav2" id="li2" type="radio" name="nav">
<ul class='nav'>
<li class='active'><label for="li1">列表1</label></li>
<li><label for="li2">列表2</label></li>
</ul>
<div class="content">
<div class="content1">列表1内容:</div>
<div class="content1">列表2内容:abcdefgkijkl</div>
</div>
</div>

  使用两个单选框,分别对应两个导航选项,运用上面介绍的 label 绑定表单,:checked 接收点击事件,可以得到第二解法。

总结:

  其实主要是为了记录纯css接受用户点击事件的方式,一种是:targer伪类选择符,另一种就是表单元素的:check伪类选择符,同时用到label for去伪造;至于兄弟选择符没什么好说的。

使用 CSS 接收用户的点击事情并对相关节点进行操作的更多相关文章

  1. C#入门教程(三)–接收用户输入、转义字符、类型转换-打造C#入门教程

    上次教程主要讲解了visual stdio快捷键.变量相关的知识.具体教程戳这里:http://www.chengxiaoxiao.com/net/1027.html 越来越深入去写教程越来越发现,自 ...

  2. iOS之防止用户重复点击Button(按钮)问题

    在项目中,我们往往会遇到这样的问题:因为网络较慢的原因,用户会不耐烦的一直去点击按钮,这样导致的结果时:相关代码一遍一遍的被重复执行,如果按钮的事件是网络请求的话,这样又导致一种网络请求的循环.所以我 ...

  3. WTF Forms – 使用 CSS 实现用户体验更好的表单

    WTF forms 借助 CSS 提供友好的 HTML 表单控件,专为 IE9+ 以及最新的 Chrome.Safari 和 Firefox 浏览器.以文件输入控件的改进,使用 label 包裹在 i ...

  4. jquery动画效果中,避免持续反应用户的连续点击

    一.某些动画效果中,避免持续连续反应用户的连续点击(这标题真不好描述) 意思就是指用户点击速度很快,完成一次效果的时间不能很快结束的话,就会出现用户不点击了,效果还在持续.看下面例子就明白了,手风琴效 ...

  5. iOS 11开发教程(十七)iOS11应用视图之使用按钮接收用户输入

    iOS 11开发教程(十七)iOS11应用视图之使用按钮接收用户输入 在iOS中提供了很多的控件以及视图来丰富用户界面,对于这些视图以及控件我们在上一章中做了简单的介绍.本章我们将详细讲解这些视图. ...

  6. Xamarin iOS教程之使用按钮接接收用户输入

    Xamarin iOS教程之使用按钮接接收用户输入 Xamarin iOS使用按钮接接收用户输入 按钮是用户交互的最基础控件.即使是在iPhone或者iPad中,用户使用最多操作也是通过触摸实现点击. ...

  7. 使用 CSS 追踪用户

    原文地址:Crooked Style Sheets 作者:jbtronics 除了使用 JS 追踪用户,现在有人提出了还可以使用 CSS 进行网页追踪和分析,译者认为,这种方式更为 优雅,更为 简洁, ...

  8. 第4章 Java接收用户输入

    第4章 Java接收用户输入 1.输入 使用Scanner工具类可以换取用户输入的数据Scanner类位于java.util包中,使用时需要导入此包使用步骤: 1.导入java.util.Scanne ...

  9. asp.net中如何防止用户重复点击提交按钮

    asp.net中如何防止用户重复点击提交按钮   asp.net 中防止因为网速慢等影响交互的问题导致用户可能点击多次提交按钮,从而导致数据库中出现多条重复的记录,经过亲自验证在网上找的方法,找到两个 ...

随机推荐

  1. Node.js用6行代码1个JS文件搭建一个HTTP静态服务器

    Node.js是一个基于Chrome的JavaScript运行时的用户以轻松构建快速.可扩展的网络应用平台. Node.js使用事件驱动.非阻塞I/ O模型,使它轻量级.高效和完美的适用于运行在分布式 ...

  2. JavaMail发送和接收邮件API(详解)

    一.JavaMail概述: JavaMail是由Sun定义的一套收发电子邮件的API,不同的厂商可以提供自己的实现类.但它并没有包含在JDK中,而是作为JavaEE的一部分. 厂商所提供的JavaMa ...

  3. Driving proportional valves from microcontroller

    Driving proportional valves from microcontroller I am looking to drive a current regulated proportio ...

  4. ubuntu下msmtp+mutt的安装和配置

    1.mutt+msmtp的安装 默认情况下smokeping发送邮件使用sendmail,但是sendmail配置起来真心不是一般的麻烦,而且也没有必要,完全大材小用了,所以我就想用mutt+msmt ...

  5. 【Go入门教程2】基本构成元素:标识符(identifier)、关键字(keyword 25个)、字面量(literal)、分隔符(delimiter)、和 操作符(operator)

    基本构成要素 Go 的语言符号 又称 词法元素,共包括 5 类内容——标识符(identifier).关键字(keyword).字面量(literal).分隔符(delimiter) 和 操作符(op ...

  6. Android论坛

    APKBUS:http://www.apkbus.com/forum.php 看雪ANDROID:http://bbs.pediy.com http://www.52pojie.cn http://w ...

  7. Linux驱动开发——指针和错误值

    参考: <Linux设备驱动程序>第三版 P294 许多内部的内核函数返回一个指针值给调用者,而这些函数中很多可能会失败.在大部分情况下,失败是通过返回一个NULL指针值来表示的.这种技巧 ...

  8. [转发]将Delphi的对象方法设为回调函数

    心血来潮,为了实现更好的通用性和封装性,需要把类方法作为回调函数,搜得一篇好文,节选转发.命名似乎应该是MethodToCallback才合适,可惜调试时总是报错,debugging. 原文地址:ht ...

  9. SQLCE使用本地数据库优化

    一.数据绑定 1.使用数据虚拟化和SKIP/TAKE 使用 Skip 和 Take 方法可确保直到需要在 ListBox 控件中显示数据时才将数据库中的数据加载到内存中. 例如,以下代码显示了如何从数 ...

  10. Linux init 0-6 启动级别

    原文地址:http://blog.sina.com.cn/s/blog_5f8e8d9801010wlr.html 原文地址:[转]Linux init 0-6 启动级别作者:流水清风 init 0- ...