html5教程-无JavaScript纯CSS实现选项卡轮转切换效果

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

&nbs p;

一、效果展示

.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; text-decoration:none;}

1

2

3

4

1 2 3 4

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

二、关于实现

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

上面效果代码如下：

CSS 部分：

 .box{width:200px; h ei ght: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 -t op:10px; text-align:right;} .click{dis play :inline-block; width:20px; height:20px; line-height:20px; border:1px solid #ccc; background:#f7f7f7; color:#333; font -s ize: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="t hr ee">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.im Press ivewebs….r-w IT hout-javascript/

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

（本篇完）

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

总结

以上是 为你收集整理的 html5教程-无JavaScript纯CSS实现选项卡轮转切换效果 全部内容，希望文章能够帮你解决 html5教程-无JavaScript纯CSS实现选项卡轮转切换效果 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于html5教程-无JavaScript纯CSS实现选项卡轮转切换效果的详细内容...