`
shizisongsong
  • 浏览: 39387 次
文章分类
社区版块
存档分类
最新评论

CSS3 target伪类简介,以实现tab效果为例子

阅读更多

CSS3 target伪类是众多实用的CSS3特性中的一个。它用来匹配文档(页面)的URI中某个标志符的目标元素。具体来说,URI中的标志符通常会包含一个”#”字符,然后后面带有一个标志符名称,比如#respond,target就是用来匹配ID为respond的元素的。

现在在页面中,点击一个ID链接后,页面只会跳转到相应的位置,但是并不会有比较明显的UI标识,使用:target伪类可以像:hover等伪类一样对目标元素定义样式。

浏览器支持

因为我们在讨论CSS3,所以它现在被除了IE6-8以外的所有浏览器支持,但是IE9会支持这个伪类。这是相当遗憾的,但是这个现实并不影响你使用它。最专业的UI前端框架!

如何使用:target

:target伪类和:hover、:link、:visited、:focus等伪类的用法是一样的:

.代码 
  1. selector:target{  
  2. color:red;  
  3. /*other styles*/  
  4. }  

 

实例

让我们通过一个简单的例子来演示。比如我们在页面中常常会用到tab,之前我们要用脚本来实现,YUI、jQuery也都有这样的插件或者模块,但是现在我们用:target伪类就可以实现。

HTML结构: 最专业的UI前端框架!

.代码 
  1. <ul class="tabs">  
  2.  <li><a href="#tab1">标签一</a></li>  
  3.  <li><a href="#tab2">标签二</a></li>  
  4.  <li><a href="#tab3">标签三</a></li>  
  5. </ul>  
  6. <div id="tab1" class="tab_content">  
  7. <!--tabed content--></div>  
  8. <div id="tab2" class="tab_content">  
  9. <!--tabed content--></div>  
  10. <div id="tab3" class="tab_content">  
  11. <!--tabed content--></div>  

 

CSS3代码:

.代码 
  1. /*layout styles*/  
  2. .tab_content {  
  3.  position: absolute;/*set content box as absolute*/  
  4.  /*other layout styles*/  
  5. }  
  6. #tab1:target, #tab2:target, #tab3:target {  
  7.  z-index: 1;  
  8. }  

 

原理想必大家都看懂了,就是将tab内容框设置为绝对定位,然后通过:target伪类调整其z-index。最专业的UI前端框架!

这里是个demo页面

0
1
分享到:
评论

相关推荐

    纯HTML和CSS实现Tab切换效果

    我们可以使用伪类`:hover`, `:focus`来增加Tab按钮的交互感,同时利用CSS的`display`属性来控制内容区域的显示和隐藏。 以下是一个简单的CSS示例: ```css .tab-btn { cursor: pointer; /* 鼠标悬停时显示指针 */...

    div+css tab样式

    3. 使用伪类和`:target`选择器切换显示: 当用户点击`tab`按钮时,浏览器会在URL中添加一个`#`后跟对应`tab`内容的ID。我们可以通过`:target`选择器来检测这个ID,从而改变对应`tab`内容的显示状态。 在实际开发中...

    CSS制作Tab菜单样式

    CSS在这里的作用是为Tab按钮添加样式,以及控制各个显示区域的显示与隐藏状态。 要创建Tab菜单,HTML结构至关重要。一个简单的例子可能如下所示: ```html &lt;li&gt;&lt;a href="#tab1" class="active"&gt;Tab 1&lt;/a&gt;&lt;/li&gt; ...

    利用纯CSS3实现tab选项卡切换示例代码

    在本文中,我们将深入探讨如何使用纯CSS3实现一个简单的tab选项卡切换效果。这个方法主要依赖于CSS3中的`target`伪类和`z-index`属性,它提供了一种无需JavaScript介入的动态页面交互方式。 首先,让我们理解`...

    css之tab css之tab

    例如,我们可以使用CSS的`:target`伪类来实现纯CSS的标签页切换,或者利用`transition`属性添加平滑的切换效果。 图片`pic1.jpg`和`pic2.jpg`可能展示了不同阶段的标签页样式或效果,而`tab.rar`可能是包含更多示例...

    js实现tab标签切换效果.zip

    我们可以使用CSS类来控制内容区域的显示和隐藏,例如,可以有一个名为`hidden`的CSS类,用于隐藏元素: ```css .tab-content.hidden { display: none; } ``` 在JavaScript中,我们可以获取到`data-target`属性所...

    基于Bootstrap实现tab标签切换效果

    Bootstrap的`nav-tabs`类为这些链接提供了标签样式,`data-toggle='tab'`属性是实现标签切换的关键,它告诉Bootstrap这个链接将切换到对应的标签内容。 每个链接的`href`属性值(如`#xw1`、`#xw2`)对应着一个`tab-...

    用div+css实现选项卡效果(适用于任何浏览器)

    &lt;div class="tab-title" data-target="tab3"&gt;选项卡3 &lt;div id="tab1" class="tab-content active"&gt;这是选项卡1的内容 &lt;div id="tab2" class="tab-content"&gt;这是选项卡2的内容 &lt;div id="tab3" class="tab-...

    jquery tab小例子

    "jQuery Tab小例子"旨在为初学者提供一个快速上手的实践教程,通过简单的代码实现Tab切换效果。 首先,jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。Tab组件是...

    js_CSS样式tab菜单导航样式

    对于Tab菜单,我们通常会创建一个包含多个类的CSS样式规则,比如`.tabs`(容器),`.tab-links`(链接组),`.tab-content`(内容区),以及`.active`(激活状态)等。例如: ```css .tabs { display: flex; } ....

    CSS选项卡效果代码

    CSS可以使用伪类(如`:hover`, `:active`, `:target`)和选择器(如`nth-child()`)来实现这一功能。以下是一个简单的例子: ```css .tabs-container .tab-content { display: none; /* 隐藏所有内容 */ } .tabs-...

    jquery+css实现Tab栏切换的代码实例

    在本文中,我们将探讨如何使用jQuery和CSS来实现Tab栏切换功能。这个功能在许多网页设计中非常常见,用于组织和展示多个相关的部分内容。在面试或日常开发中,掌握这种基本技巧是至关重要的。 首先,我们需要理解...

    jQuery实现简单tab切换

    3. **jQuery代码**:编写jQuery脚本以实现Tab切换功能。首先,我们让第一个Tab内容显示,然后添加事件监听器。 ```javascript $(document).ready(function() { // 默认显示第一个Tab $('.content').first().show...

    js原生实现tab栏的效果.zip

    在JavaScript的世界里,原生JS实现Tab栏效果是一项常见的任务,尤其对于前端开发者而言。Tab栏设计用于在有限的空间内组织大量内容,通过切换不同的Tab,用户可以方便地查看和操作相关内容。本资源提供了一个使用纯...

    非常简洁的代码TAB效果

    在IT行业中,"非常简洁的代码TAB效果"通常指的是在用户界面设计中实现的标签页(TAB)功能,它允许用户通过切换不同的标签来查看或操作不同的内容区域。这种效果在网页、桌面应用以及移动应用中都十分常见,极大地提高...

    jquery实现的一个Tab选项效果

    在实现Tab选项卡效果时,jQuery提供了一种高效且简洁的方法。通常,Tab选项卡由一组可切换的面板和相应的触发按钮组成。每个按钮对应一个面板,当用户点击按钮时,对应的面板会被显示,其他面板则隐藏。 1. **HTML...

    采用Table CSS实现的TabPane选项卡.rar

    - 如果不使用JavaScript,可以通过CSS的`:target`伪类来实现纯CSS的选项卡切换,但这种方法可能限制了某些高级交互功能。 5. **响应式设计**: - 对于移动设备,可能需要调整选项卡的布局,例如使用垂直堆叠或...

    HTML5+CSS3实现Tabs选项卡特效.zip

    CSS3提供了许多新特性,如伪类选择器、过渡效果(transition)、动画(animation)等,这些都可以用来实现选项卡的切换效果。例如,我们可以使用`:hover`和`:active`伪类来改变鼠标悬停和选中状态下的样式;使用`...

    web中tab菜单

    CSS隐藏所有内容面板,但通过JavaScript将选中的内容面板的类设置为`active`,使其可见。 JavaScript部分(例如使用jQuery)会监听Tab标题的点击事件,根据用户的选择切换内容: ```javascript $('.tabs a').click...

    纯CSS3实现TAB选项卡切换特效代码

    首先,选项卡切换的基本原理是利用CSS3的伪类选择器,如`:hover`, `:active`, 和 `:target`,以及`transition`和`animation`属性来实现动态效果。在我们的例子中,我们可能有若干个`&lt;div&gt;`或`&lt;li&gt;`元素代表选项卡,...

Global site tag (gtag.js) - Google Analytics