CSS3 target伪类是众多实用的CSS3特性中的一个。它用来匹配文档(页面)的URI中某个标志符的目标元素。具体来说,URI中的标志符通常会包含一个”#”字符,然后后面带有一个标志符名称,比如#respond,target就是用来匹配ID为respond的元素的。
现在在页面中,点击一个ID链接后,页面只会跳转到相应的位置,但是并不会有比较明显的UI标识,使用:target伪类可以像:hover等伪类一样对目标元素定义样式。
浏览器支持
因为我们在讨论CSS3,所以它现在被除了IE6-8以外的所有浏览器支持,但是IE9会支持这个伪类。这是相当遗憾的,但是这个现实并不影响你使用它。最专业的UI前端框架!
如何使用:target
:target伪类和:hover、:link、:visited、:focus等伪类的用法是一样的:
- selector:target{
- color:red;
- /*other styles*/
- }
实例
让我们通过一个简单的例子来演示。比如我们在页面中常常会用到tab,之前我们要用脚本来实现,YUI、jQuery也都有这样的插件或者模块,但是现在我们用:target伪类就可以实现。
HTML结构: 最专业的UI前端框架!
- <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">
- <!--tabed content--></div>
- <div id="tab2" class="tab_content">
- <!--tabed content--></div>
- <div id="tab3" class="tab_content">
- <!--tabed content--></div>
CSS3代码:
- /*layout styles*/
- .tab_content {
- position: absolute;/*set content box as absolute*/
- /*other layout styles*/
- }
- #tab1:target, #tab2:target, #tab3:target {
- z-index: 1;
- }
原理想必大家都看懂了,就是将tab内容框设置为绝对定位,然后通过:target伪类调整其z-index。最专业的UI前端框架!
这里是个demo页面。
相关推荐
我们可以使用伪类`:hover`, `:focus`来增加Tab按钮的交互感,同时利用CSS的`display`属性来控制内容区域的显示和隐藏。 以下是一个简单的CSS示例: ```css .tab-btn { cursor: pointer; /* 鼠标悬停时显示指针 */...
3. 使用伪类和`:target`选择器切换显示: 当用户点击`tab`按钮时,浏览器会在URL中添加一个`#`后跟对应`tab`内容的ID。我们可以通过`:target`选择器来检测这个ID,从而改变对应`tab`内容的显示状态。 在实际开发中...
CSS在这里的作用是为Tab按钮添加样式,以及控制各个显示区域的显示与隐藏状态。 要创建Tab菜单,HTML结构至关重要。一个简单的例子可能如下所示: ```html <li><a href="#tab1" class="active">Tab 1</a></li> ...
在本文中,我们将深入探讨如何使用纯CSS3实现一个简单的tab选项卡切换效果。这个方法主要依赖于CSS3中的`target`伪类和`z-index`属性,它提供了一种无需JavaScript介入的动态页面交互方式。 首先,让我们理解`...
例如,我们可以使用CSS的`:target`伪类来实现纯CSS的标签页切换,或者利用`transition`属性添加平滑的切换效果。 图片`pic1.jpg`和`pic2.jpg`可能展示了不同阶段的标签页样式或效果,而`tab.rar`可能是包含更多示例...
我们可以使用CSS类来控制内容区域的显示和隐藏,例如,可以有一个名为`hidden`的CSS类,用于隐藏元素: ```css .tab-content.hidden { display: none; } ``` 在JavaScript中,我们可以获取到`data-target`属性所...
Bootstrap的`nav-tabs`类为这些链接提供了标签样式,`data-toggle='tab'`属性是实现标签切换的关键,它告诉Bootstrap这个链接将切换到对应的标签内容。 每个链接的`href`属性值(如`#xw1`、`#xw2`)对应着一个`tab-...
<div class="tab-title" data-target="tab3">选项卡3 <div id="tab1" class="tab-content active">这是选项卡1的内容 <div id="tab2" class="tab-content">这是选项卡2的内容 <div id="tab3" class="tab-...
"jQuery Tab小例子"旨在为初学者提供一个快速上手的实践教程,通过简单的代码实现Tab切换效果。 首先,jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。Tab组件是...
对于Tab菜单,我们通常会创建一个包含多个类的CSS样式规则,比如`.tabs`(容器),`.tab-links`(链接组),`.tab-content`(内容区),以及`.active`(激活状态)等。例如: ```css .tabs { display: flex; } ....
CSS可以使用伪类(如`:hover`, `:active`, `:target`)和选择器(如`nth-child()`)来实现这一功能。以下是一个简单的例子: ```css .tabs-container .tab-content { display: none; /* 隐藏所有内容 */ } .tabs-...
在本文中,我们将探讨如何使用jQuery和CSS来实现Tab栏切换功能。这个功能在许多网页设计中非常常见,用于组织和展示多个相关的部分内容。在面试或日常开发中,掌握这种基本技巧是至关重要的。 首先,我们需要理解...
3. **jQuery代码**:编写jQuery脚本以实现Tab切换功能。首先,我们让第一个Tab内容显示,然后添加事件监听器。 ```javascript $(document).ready(function() { // 默认显示第一个Tab $('.content').first().show...
在JavaScript的世界里,原生JS实现Tab栏效果是一项常见的任务,尤其对于前端开发者而言。Tab栏设计用于在有限的空间内组织大量内容,通过切换不同的Tab,用户可以方便地查看和操作相关内容。本资源提供了一个使用纯...
在IT行业中,"非常简洁的代码TAB效果"通常指的是在用户界面设计中实现的标签页(TAB)功能,它允许用户通过切换不同的标签来查看或操作不同的内容区域。这种效果在网页、桌面应用以及移动应用中都十分常见,极大地提高...
在实现Tab选项卡效果时,jQuery提供了一种高效且简洁的方法。通常,Tab选项卡由一组可切换的面板和相应的触发按钮组成。每个按钮对应一个面板,当用户点击按钮时,对应的面板会被显示,其他面板则隐藏。 1. **HTML...
- 如果不使用JavaScript,可以通过CSS的`:target`伪类来实现纯CSS的选项卡切换,但这种方法可能限制了某些高级交互功能。 5. **响应式设计**: - 对于移动设备,可能需要调整选项卡的布局,例如使用垂直堆叠或...
CSS3提供了许多新特性,如伪类选择器、过渡效果(transition)、动画(animation)等,这些都可以用来实现选项卡的切换效果。例如,我们可以使用`:hover`和`:active`伪类来改变鼠标悬停和选中状态下的样式;使用`...
CSS隐藏所有内容面板,但通过JavaScript将选中的内容面板的类设置为`active`,使其可见。 JavaScript部分(例如使用jQuery)会监听Tab标题的点击事件,根据用户的选择切换内容: ```javascript $('.tabs a').click...
首先,选项卡切换的基本原理是利用CSS3的伪类选择器,如`:hover`, `:active`, 和 `:target`,以及`transition`和`animation`属性来实现动态效果。在我们的例子中,我们可能有若干个`<div>`或`<li>`元素代表选项卡,...