CSS实现Tab页切换

谁践踏了优雅 2022-06-01 12:24 249阅读 0赞

**1.hover**

> 移入其父元素.navI时，触发鼠标的hover态，给父元素添加样式为position:relative;z-index:1;。从而提升了层级z-index。在其子元素导航内容的层级比拼中，“子凭父贵”，父元素层级高的，其导航内容在重叠状态中显示在最上面

<style> body,p{ margin: 0;} h2{ margin: 0;font-size:100%;} ul{ margin: 0;padding: 0;list-style: none;} a{ text-decoration: none;color:inherit;} .box{ width: 572px;border: 1px solid #999;overflow: hidden;} .nav{ margin-left: -1px;font: 14px "微软雅黑";overflow: hidden;background-color: #f1f1f1;} .navI{ float: left;width: 33.333%;box-sizing: border-box;} .navI-tit{ line-height: 40px;text-align: center;cursor: pointer;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;} .navI-txt{ width: 572px;height:200px;text-indent:2em;line-height: 2;background:#fff;} .ml1{ margin-left: -100%;} .ml2{ margin-left: -200%;} .navI_active{ position:relative;z-index:1;} /*重点代码*/ .navI:hover{ position:relative;z-index:1;} .navI:hover .navI-tit{ background:#fff;border-bottom:none;} </style>
    
    
    <div class="box">
        <ul class="nav">
            <li class="navI navI_active">
                <h2 class="navI-tit">课程</h2>
                <p class="navI-txt">课程内容</p>
            </li>
            <li class="navI">
                <h2 class="navI-tit">学习计划</h2>
                <p class="navI-txt ml1">学习计划内容</p>
            </li>
            <li class="navI">
                <h2 class="navI-tit">技能图谱</h2>
                <p class="navI-txt ml2">技能图谱内容</p>
            </li>
        </ul>   
    </div>

**2.锚点**

> 点击导航标题时，触发target伪类，改变对应的导航内容的层级z-index，从而使当前导航内容在三个导航内容中胜出，在最上层显示；与此同时，改变当前导航标题的样式

<style> body,p{ margin: 0;} h2{ margin: 0;font-size:100%;} ul{ margin: 0;padding: 0;list-style: none;} a{ text-decoration: none;color:inherit;} .box{ width: 572px;border: 1px solid #999;overflow: hidden;} .nav{ margin-left: -1px;font: 14px "微软雅黑";overflow: hidden;background-color: #f1f1f1;} .navI{ float: left;width: 33.333%;box-sizing: border-box;position:relative;} .navI-tit{ position:absolute;top:0;left:0;right:0;box-sizing: border-box;line-height: 40px;height: 40px;text-align: center;cursor: pointer;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;} .navI-txt{ width: 572px;height:200px;margin-top: 40px;text-indent:2em;line-height: 2;background:#fff;} .ml1{ margin-left: -100%;} .ml2{ margin-left: -200%;} .navI_active{ z-index:1;} /*重点代码*/ .navI-txt:target{ position:relative;z-index:1;} .navI-txt:target ~ .navI-tit{ background:#fff;border-bottom:none;} </style>
    
    <div class="box">
        <ul class="nav">
            <li class="navI navI_active">
                <p class="navI-txt" id="kc">课程内容</p>
                <a class="navI-tit" href="#kc">课程</a>
            </li>
            <li class="navI">
                <p class="navI-txt ml1" id="xx">学习计划内容</p>
                <a class="navI-tit" href="#xx">学习计划</a>
            </li>
            <li class="navI">
                <p class="navI-txt ml2" id="jn">技能图谱内容</p>
                <a class="navI-tit" href="#jn">技能图谱</a>
            </li>
        </ul>   
    </div>

**3.radio**

> 点击导航标题时，触发checked伪类，改变对应的导航内容的层级z-index，从而使当前导航内容在三个导航内容中胜出，在最上层显示；与此同时，改变当前导航标题的样式

<style> body,p{ margin: 0;} ul{ margin: 0;padding: 0;list-style: none;} a{ text-decoration: none;color: inherit;} input{ margin: 0;padding: 0;border:none;} .box{ width:572px;border:1px solid #999;font:14px "微软雅黑";overflow:hidden;} .nav-tit{ margin-left: -1px;height: 40px;line-height: 40px;text-align: center;background-color: #f1f1f1;overflow: hidden;} .nav-titI{ box-sizing: border-box;float: left;width: 33.333%;border-left: 1px solid #cecece;border-bottom: 1px solid #cecece;cursor: pointer;} .nav-txt{ height: 200px;} .nav-txtI{ height: 200px;display:block;width: 100%;text-indent: 2em; line-height: 2;} /*重点内容*/ .nav-txt{ overflow: hidden;} .nav-titI:hover{ background-color: #fff;border-bottom:none;} </style>
    
    <div class="box">
        <nav class="nav-tit">
            <label class="nav-titI" for="kc">课程</label>
            <label class="nav-titI" for="xx">学习计划</label>
            <label class="nav-titI" for="jn">技能图谱</label>
        </nav>
        <nav class="nav-txt">
            <input class="nav-txtI nav-txtI_active" id="kc" value="课程内容" readonly>
            <input class="nav-txtI" id="xx" value="学习计划内容" readonly>
            <input class="nav-txtI" id="jn" value="技能图谱内容" readonly>
        </nav>
    </div>

发表评论取消回复

表情：

评论列表（有 0 条评论，249人围观）

还没有评论，来说两句吧...

相关阅读

相关【Flutter】TabBarView实现多Tab页切换

我们在Flutte中通过`TabBar`和`TabBarView`的组合实现多标签页的APP结构首先定义page1如下： import 'package:flut

悠悠/ 2023年07月22日 03:59/ 0 赞/ 16 阅读

相关 tab页切换只渲染一页的数据

第一页： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

女爷i/ 2023年02月19日 05:23/ 0 赞/ 11 阅读

相关 HTML+CSS实现鼠标滑过tab页切换

实现效果：当鼠标滑过tab标签时，实现对应标签的内容切换 <!DOCTYPE html> <html> <head> <ti

雨点打透心脏的1/2处/ 2022年12月04日 01:03/ 0 赞/ 516 阅读

相关纯CSS实现Tab切换以及 CSS+JS实现Tab切换

纯CSS实现Tab切换效果图思路代码 CSSJS实现Tab切换效果图

怼烎@/ 2022年09月24日 11:20/ 0 赞/ 292 阅读

相关纯CSS实现tab切换

用单选框的:checked伪类和相邻选择器实现代码如下： <!DOCTYPE html> <html> <head> <title></

水深无声/ 2022年07月16日 12:59/ 0 赞/ 201 阅读

相关 CSS实现Tab页切换

1.hover > 移入其父元素.navI时，触发鼠标的hover态，给父元素添加样式为position:relative;z-index:1;。从而提升了层级z-index

谁践踏了优雅/ 2022年06月01日 12:24/ 0 赞/ 250 阅读

相关基于jQuery实现tab选项卡【js实现页签切换】

-------------------- 任务描述本关任务：用jquery实现一个`tab`切换的功能。效果图如下： ![195313][] 相关知识为了完成

青旅半醒/ 2022年04月11日 02:50/ 0 赞/ 362 阅读

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

前几天面试碰到现场给写一个Tab栏切换的功能，思想基本上懂，但是好久没写过，一时要全部实现效果还真有点难。回来后，再把思路理一理，写一个，基础还是很重要的。最终要实现的效果

谁践踏了优雅/ 2022年01月29日 00:31/ 0 赞/ 278 阅读

相关 tab页选项卡切换效果

效果图 ![20190625151915714.png][] html页面结构 <div class="tabbox" id="clicktab">

た入场券/ 2022年01月07日 06:43/ 0 赞/ 463 阅读

相关 jQuery实现tab切换

$('tab-content li').click(function() { var i = $(this).index();//下标

野性酷女/ 2021年11月05日 06:10/ 0 赞/ 378 阅读