这篇文章发布于 09月15日，星期三，21:06，归类于css相关。 阅读 39325 次, 今日 23 次
byzhangxinxu from
本文地址：/wordpress/?p=1108
一、效果展示
1
2
3
4
如果您觉得此页面上看此效果有干扰，可以狠狠地点击这里：无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部分：
1
2
3
4
1234
锚点是实现了基本的切换效果，如果您想添加进一步的效果（例如让页面无跳转），显然，需要JavaScript进行一番美化的。
补充于8月19日
纯CSS实现选项卡方法很多，比方说“CSS radio/checkbox单复选框元素显隐技术”一文中介绍过的CSS radio单选框下的选项卡切换
也可以借助控件元素focus时候的滚动定位原理来实现（已申请专利一段时间了），可以同时解决兼容性（radio实现）和锚点跳动（锚点定位）两大问题。
这个时间原因，以后有机会再分享。
参考文章：http://www.impressivewebs….r-without-javascript/
关于锚点的些拓展知识，看机参见“关于锚点跳转及jQuery下相关操作与插件”此文。
本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[]
本文地址：/wordpress/?p=1108
（本篇完）// 想要打赏？点击。有话要说？点击。
想找个师兄入门前端？不妨
相关文章
关于锚点跳转及jQuery下相关操作与插件 (0.691)
URL锚点HTML定位技术机制、应用与问题 (0.691)
Chrome下语音识别实现页面快速引导以及重要交互 (0.403)
小tip: 使用meta实现页面的定时刷新或跳转 (0.403)
jQuery之addClasas与removeClass使用实例 (0.309)
最近整的MooTools库下Mbox弹框插件 (0.288)
小tip：iframe高度动态自适应 (0.288)
仿新浪微博返回顶部的js实现(jQuery/MooTools) (0.288)
span与a元素的键盘聚焦性以及键盘点击性研究 (0.288)
css margin的相关属性，问题及应用 (0.252)
HTML CSS列表元素ul,ol,dl的研究与应用 (RANDOM - 0.026)
分享到：
标签：css相关,javascript,选项卡,锚点,锚点跳转
如果觉得《无JavaScript纯CSS实现选项卡轮转切换效果 ? 张鑫旭》对你有帮助，请点赞、收藏，并留下你的观点哦！
