Warning: session_start(): open(/tmp/sess_d0simqaabag8jlnk3frqdc0dj1, O_RDWR) failed: Disk quota exceeded (122) in /home/tensungn/public_html/www.tzlink.com/info/show.php on line 8

Warning: session_start(): Cannot send session cookie - headers already sent by (output started at /home/tensungn/public_html/www.tzlink.com/info/show.php:8) in /home/tensungn/public_html/www.tzlink.com/info/show.php on line 8

Warning: session_start(): Cannot send session cache limiter - headers already sent (output started at /home/tensungn/public_html/www.tzlink.com/info/show.php:8) in /home/tensungn/public_html/www.tzlink.com/info/show.php on line 8
无JavaScript实现选项卡轮转切换效果 - JavaScript/JQuery编程 - 站长之家

热烈祝贺台州维博网络的站长论坛隆重上线!(2012-05-28)    热烈庆祝伟大的祖国60周年生日 点击进来我们一起为她祝福吧(2009-09-26)    站长论坛禁止发布广告,一经发现立即删除。谢谢各位合作!.(2009-08-08)    热烈祝贺台州网址导航全面升级,全新版本上线!希望各位一如既往地支持台州网址导航的发展.(2009-03-28)    台州站长论坛恭祝各位新年快乐,牛年行大运!(2009-01-24)    台州Link正式更名为台州网址导航,专业做以台州网址为主的网址导航!(2008-05-23)    热烈祝贺台州Link资讯改名为中国站长资讯!希望在以后日子里得到大家的大力支持和帮助!(2008-04-10)    热烈祝贺台州Link论坛改名为台州站长论坛!希望大家继续支持和鼓励!(2008-04-10)    台州站长论坛原[社会琐碎]版块更名为[生活百科]版块!(2007-09-05)    特此通知:新台州站长论坛的数据信息全部升级成功!">特此通知:新台州站长论坛的数据信息全部升级成功!(2007-09-01)    台州站长论坛对未通过验证的会员进行合理的清除,请您谅解(2007-08-30)    台州网址导航|上网导航诚邀世界各地的网站友情链接和友谊联盟,共同引领网站导航、前进!(2007-08-30)    禁止发广告之类的帖,已发现立即删除!(2007-08-30)    希望各位上传与下载有用资源和最新信息(2007-08-30)    热烈祝贺台州站长论坛全面升级成功,全新上线!(2007-08-30)    
便民网址导航,轻松网上冲浪。
台州维博网络专业开发网站门户平台系统
您当前的位置: 首页 » JavaScript/JQuery编程 » 无JavaScript实现选项卡轮转切换效果

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

论坛链接
  • 无JavaScript实现选项卡轮转切换效果
  • 发布时间:2010-10-21 14:14:08    浏览数:6553    发布者:superadmin    设置字体【   
一、效果展示
如果您觉得此页面上看此效果有干扰,可以狠狠地点击这里:无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/
娱乐休闲专区A 影视预告B 音乐咖啡C 英语阶梯D 生活百科
网页编程专区E AMPZF HTMLG CSSH JSI ASPJ PHPK JSPL MySQLM AJAX
Linux技术区 N 系统管理O 服务器架设P 网络/硬件Q 编程序开发R 内核/嵌入
管理中心专区S 发布网址T 版主议事U 事务处理

Warning: Unknown: open(/tmp/sess_d0simqaabag8jlnk3frqdc0dj1, O_RDWR) failed: Disk quota exceeded (122) in Unknown on line 0

Warning: Unknown: Failed to write session data (files). Please verify that the current setting of session.save_path is correct (/tmp) in Unknown on line 0