飞龙博客

feilong.org 前端开发教程

纯css制作滑动tab选项卡思路

飞龙修订于 20100811 03:15 150 次浏览

如果你在找纯css制作的tab选项卡效果,网上有一些可用的,飞龙收集了一些。不过有些tab可以滑动,有些需要点击。有些是真的用css和xhml制作的tab选项卡,有些说是纯css其实还有JavaScript的配合。有些去掉css后的纯html就变得不可阅读缺乏语义化,有些语义化可以可惜ul dl div混杂,所以飞龙感觉似乎没找到真正合适的纯css制作的tab选项卡。 飞龙晚上决定自己从零开始,自己来做一个可以滑动的纯css不带JavaScript的tab选项卡/滑动门效果。思路是:可以用链接a或li的hover属性模拟滑动效果,再用li下子ul,实现选项卡下内容的显示或隐藏。本日志更新网址:http://feilong.org/tabslider-purecss-nojavascript 飞龙第2次修订于20100811深圳 一、首先抛开css和javascript,写下纯xhml代码。由一个div包含一个双层ul组成。这样可以保证没有css了,一样可以清晰显示内容。 <div class="fltabslider"><ul> <li><a href="#feilong">feilong</a> <ul> <li><a href="http://feilong.org/tabslider-purecss-nojavascript">feilongtab</a></li> </ul> </li......

付费查看剩下内容

网址:https://feilong.org/tabslider-purecss-nojavascript
初发:20100811 03:15

想学前端?长按二维码加我微信

想学前端?点击飞龙QQ

分类: 网站开发

新作:

旧文:

  • 言色和悦对父母
    有无相通待亲友
关闭

长按二维码 -> 识别图中二维码

打开微信,发现,扫一扫

支付完成后,点击下一步

感谢大力支持

然后你手机号:

最后点这,稍等即可