纯CSS实现导航栏Tab切换效果

<span style="font-family: verdana, geneva;">#content1:target ~ .nav li{   

    // 改变li元素的背景色和字体颜色   

    &:first-child{   

        background:#ff7300;   

        color:#fff;   

    }   

}   

#content2:target ~ .nav li{   

    // 改变li元素的背景色和字体颜色   

    &:last-child{   

        background:#ff7300;   

        color:#fff;   

    }   

}</span>  

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

至此两个问题，1. 如何接收点击事件 与 2. 如何操作相关DOM 都已经解决，剩下的是一些小样式的修补工作。

Demo戳我：纯CSS导航切换(:target伪类实现)

法二：<input type="radio"> && <label for="">

上面的方法通过添加 <a> 标签添加页面锚点的方式接收点击事件。

这里还有一种方式能够接收到点击事件，就是拥有 checked 属性的表单元素， <input type="radio"> 或者<input type="checkbox"> 。

假设有这样的结构：

CSS Code复制内容到剪贴板

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

<ul class='nav'>   

    <li>列表1</li>   

</ul>  

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

CSS Code复制内容到剪贴板

.nav1:checked ~ .nav li {   

  // 进行样式操作   

}  

同样用到了兄弟选择符 ~

这样，当接收到表单元素的点击事件时，可以通过兄弟选择符 ~ 操作它的兄弟元素的样式。

可以试着点击下面 codepen 中的单选框。

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

CSS Code复制内容到剪贴板

<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 与哪个表单元素绑定。

（编辑：好传媒网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!