无JavaScript纯CSS实现选项卡轮转切换效果

一、效果展示

如果您觉得此页面上看此效果有干扰，可以狠狠地点击这里：无JavaScript实现的切换效果demo

二、关于实现

原理：
下面的1-2-3-4链接锚点是指向box中的各个id的，当点击这些链接的时候，会先去页面上寻找诸如的内容，如果没有，就会寻找页面上id为此锚点的元素，这可以让容器里面的内容切换显示。

上面效果代码如下：

CSS部分：

 .box{
    width:200px;
     height:100px;
     border:1px solid #ddd;
     overflow:hidden;
}
 .list{
    width:200px;
     height:100px;
     line-height:100px;
     background:#ddd;
     font-Size:80px;
     text-align:center;
}
 .anchor{
    width:200px;
     padding-top:10px;
     text-align:right;
}
 .click{
    display:inline-block;
     width:20px;
     height:20px;
     line-height:20px;
     border:1px solid #ccc;
     background:#f7f7f7;
     color:#333;
     font-size:12px;
     font-weight:bold;
     text-align:center;
     text-decoration:none;
}
 .click:hover{
    background:#eee;
     color:#345;
}
     

HTML部分：

 div class="box">
         div class="list" id="one">
    1/div>
         div class="list" id="two">
    2/div>
         div class="list" id="three">
    3/div>
         div class="list" id="four">
    4/div>
     /div>
     div class="anchor">
         a class="click" href="#one">
    1/a>
         a class="click" href="#two">
    2/a>
         a class="click" href="#three">
    3/a>
         a class="click" href="#four">
    4/a>
     /div>
     

锚点是实现了基本的切换效果，如果您想添加进一步的效果（例如让页面无跳转），显然，需要JavaScript进行一番美化的。

补充于2016年8月19日
纯CSS实现选项卡方法很多，比方说“CSS radio/checkbox单复选框元素显隐技术”一文中介绍过的CSS radio单选框下的选项卡切换

也可以借助控件元素focus时候的滚动定位原理来实现（已申请专利一段时间了），可以同时解决兼容性（radio实现）和锚点跳动（锚点定位）两大问题。

这个时间原因，以后有机会再分享。

参考文章：http://www.imPressivewebs….r-wIThout-javascript/

关于锚点的些拓展知识，可以参见“关于锚点跳转及jquery下相关操作与插件”此文。

（本篇完）

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！