CSS完成Tab页切换案例编码

日期:2021-03-02 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

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: ⑴px;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: ⑴00%;}
.ml2{margin-left: ⑵00%;}
.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,从而使当今导航栏內容在3个导航栏內容中胜出,在最顶层显示信息;与此另外,更改当今导航栏题目的款式

<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: ⑴px;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: ⑴00%;}
.ml2{margin-left: ⑵00%;}
.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,从而使当今导航栏內容在3个导航栏內容中胜出,在最顶层显示信息;与此另外,更改当今导航栏题目的款式

<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: ⑴px;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>

总结

以上所述是网编给大伙儿详细介绍的CSS完成Tab页切换案例编码,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!

上一篇:浅谈CSS波动的特点 返回下一篇:没有了