纯CSS的导航栏Tab切换方案

1、使用:target伪类选择器以及兄弟选择器的使用~

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

使用:target伪类需要html锚点,以及锚点对应的html结构,例如下面a标签的锚点会对应到div的id与锚点名相同的结构

首页
首页的内容

当鼠标点击触发到对应锚点的时候,页面的URL会发生改变:由www.xxxxx.com变成www.xxxxx.com#list1;并且会触发#list1:target{ } 里面的css样式,从而达到操作DOM的效果。




  
  
  
  Document
  


  
首页的内容
关于我们的内容

方法二: 使用表单input ——————>radio,伪类:checked

这种方法需要用到label标签的for属性: for属性规定跟那个表单元素绑定

同时也要用到兄弟选择符~来控制选择节点:checked对应的样式显示




  
  
  
  Document
  


  
这是列表一的内容
这是列表二的内容

 

3、




  
  
  
  Document
  


    
列表1内容:123456
列表2内容:abcdefgkijkl

 

你可能感兴趣的:(HTML+CSS基础布局)