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

这篇文章发布于 2010年09月15日,星期三,21:06,归类于 CSS相关。 阅读 85275 次, 今日 7 次 15 条评论

 

一、效果展示

1
2
3
4
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部分:

<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单选框下的选项卡切换

纯CSS结合单选框实现的无脚本选项卡切换效果

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

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

参考文章:http://www.impressivewebs….r-without-javascript/

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

(本篇完)

分享到:


发表评论(目前15 条评论)

  1. 青菜不是葵花说道:

    你好,我试了下 id=”content1″ 的div 以及 name=”content1″的 a标签 同时存在的效果,跟你说的相反,浏览器会先找div,没有的话才会找name

  2. 老公公说道:

    不行,网页画面会跳动!!

  3. 蘇荷晨夏. ず说道:

    请问怎么改成鼠标悬停图片切换效果呢。

  4. 卜卜口の说道:

    好创意! 点击一下立刻就明白了>_<

  5. 滴水成冰说道:

    思想真的很活跃……….

  6. wawa说道:

    要是box和list高度不定就没有办法弄了

  7. seri说道:

    这个猛,思路不错。再看看研究下。谢谢~

  8. feng说道:

    貌似不怎么使用··呵呵····

  9. 吉他杀手说道:

    很有想法,但不实用。每次点击都会把内容跳到页面的顶部。

  10. cindy说道:

    无比强大

  11. zhangleifly说道:

    楼主你好强大

  12. 梧栖凤说道:

    大可当得 奇淫巧技 这几个字。
    楼上的那里不可以去聊?
    从小老师就教育我们:要么出乎意料,要么意料之外,出乎意料之外是什么意思?

  13. ratdream说道:

    真的是好强大哦,膜拜你了,呵呵,实在是出乎我的意料之外,呵呵,希望能够和你聊聊关于前端的东东,如果不介意请加我q:554129718

  14. 百奥博说道:

    css+html,真是好强大的利器