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