纯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
想学前端？长按二维码加我微信
分类： 网站开发