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

转自： http://www.zhangxinxu.com/wordpress/?p=1108

一、效果展示

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;}
.link{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="link">
    <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进行一番美化的。

参考文章：http://www.impressivewebs….r-without-javascript/
关于锚点的些拓展知识，看机参见“关于锚点跳转及jQuery下相关操作与插件”此文。

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=1108

（本篇完）