CSS滑动门代码推荐：带小三角指引的滑动门-滑动门选项卡

2018-10-16 20:53:00

字体：大中小

来源：转载

供稿：网友

CSS滑动门代码推荐：带小三角指引的滑动门，有朋友说在IE6下看不到效果，其实能看到，因为那个小三角颜色比较淡，有时候因显示器的原因看不太清，其实这个颜色是自己可以控制的，改一下就行了，带三角指引后，使整个滑动门的结构更清淅，导向性更合理。

Source Code to Run [www.cuoxin.com 错新网]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>滑动门</title><style type="text/css">*{ margin:0; padding:0; font-size:12px;}body{padding:30px;}.tabsBox{ width:400px; margin:20px auto;}.tabs{ height:20px;}.tabs li{ width:80px; text-align:center; padding-top:2px; line-height:18px; float:left; background-color:#ccc; margin-right:5px; list-style:none; position:relative; cursor:pointer; color:#333;}.tabs li span{ display:none;}.tabs .cur{ background-color:#f0f0f0;}.tabs .cur span{ display:block; width:1px; height:1px; border:solid 8px; border-color:#f0f0f0 #fff #fff #fff; position:absolute; top:20px; left:32px; overflow:hidden; z-index:-1;}.cons{ height:120px; padding:8px 12px; overflow:hidden; border:1px solid #f0f0f0; position:relative; z-index:1;}.cons ul li{ list-style:none; line-height:20px;}.hidden{ display:none;}.block{ display:block;}</style></head><body><div class="tabsBox"><ul id="Tabs" class="tabs"><li class="cur">最新更新<span></span></li><li>推荐<a target="_blank" href="http://www.cuoxin.com" class="UBBWordLink">下载</a><span></span></li><li><a target="_blank" href="http://www.cuoxin.com" class="UBBWordLink">下载</a>排行<span></span></li><li>本月排行<span></span></li></ul><div id="TabsCon" class="cons"><ul><li><a href="/soft/4764.shtml" target="_blank">基于JavaScript的气泡提示网页版</a></li><li><a href="/soft/8021.shtml" target="_blank">C#调用OFFICE组件生成Excel表格示例</a></li><li><a href="/soft/9011.shtml" target="_blank">iFrame 框架在多页面间相互传值的实例</a></li><li><a href="/soft/1658.shtml" target="_blank">高亮显示<a target="_blank" href="http://www.cuoxin.com" class="UBBWordLink">代码</a>的在线编辑器ASP.NET版</a></li><li><a href="/soft/1852.shtml" target="_blank">《Java2核心<a target="_blank" href="http://www.cuoxin.com" class="UBBWordLink">技术</a>卷2:高级特性》第7版中文高清 PDF</a></li><li><a href="/soft/1361.shtml" target="_blank">VB餐厅POS收银<a target="_blank" href="http://www.cuoxin.com" class="UBBWordLink">软件</a></a></li></ul><ul><li><a href="/soft/1361.shtml" target="_blank">VB餐厅POS收银<a target="_blank" href="http://www.cuoxin.com" class="UBBWordLink">软件</a></a></li><li><a href="/soft/3855.shtml" target="_blank">VB 6.0 简体中文标准版</a></li><li><a href="/soft/8467.shtml" target="_blank">Delphi加密隐藏或还原Windows盘符驱动器</a></li><li><a href="/soft/5238.shtml" target="_blank">ImageVue 2.0 PHP+FLASH+XML高级相册</a></li><li><a href="/soft/7667.shtml" target="_blank">VB商品零售进销存程序含MSSQL数据库文件</a></li></ul><ul><li><a href="/jscss/code/1915.shtml" target="_blank">jQuery 模块拖动，拖动层效果，可淡入淡出</a></li><li><a href="/jscss/code/1914.shtml" target="_blank">jQuery单行新闻滚动</a></li><li><a href="/jscss/code/1913.shtml" target="_blank">经典的jQuery多行文本滚动</a></li><li><a href="/jscss/code/1912.shtml" target="_blank">JS图片切换<a target="_blank" href="http://www.cuoxin.com" class="UBBWordLink">学习</a>版，没有过多修饰</a></li><li><a href="/jscss/code/1911.shtml" target="_blank">漂浮广告<a target="_blank" href="http://www.cuoxin.com" class="UBBWordLink">代码</a>，Js演示</a></li><li><a href="/jscss/code/1910.shtml" target="_blank">边滚边停的JS图片滚动</a></li></ul><ul><li><a href="/soft/9217.shtml" target="_blank">递归读取数据库创建树控菜单的Delphi例子</a></li><li><a href="/soft/9199.shtml" target="_blank">VB抓取DLL或EXE应用程序内的图标资源</a></li><li><a href="/soft/9236.shtml" target="_blank">jQuery StartStopSlider 滚动切换插件</a></li><li><a href="/soft/9235.shtml" target="_blank">jQuery EasyUI 实例演示（菜单、TAB等）</a></li><li><a href="/soft/9227.shtml" target="_blank">VB+SQL2000考试卷（题库）生成与管理系统</a></li></ul></div></div><script type="text/javascript">var lis = document.getElementById("Tabs").getElementsByTagName("li");var uls = document.getElementById("TabsCon").getElementsByTagName("ul");var order = 0;for(var i=0; i<lis.length; i++){lis[i].value = i;lis[i].onmouseover = function(){ChangeTabs(this.value);};uls[i].className = "hidden";}lis[order].className = "cur";uls[order].className = "block";function ChangeTabs(nowTab){lis[order].className = "";uls[order].className = "hidden";order = nowTablis[nowTab].className = "cur";uls[nowTab].className = "block";}</script></body></html>

提示:您可以修改后再运行

上一篇：经典的Tab选项卡代码,淡入淡出-滑动门选项卡

下一篇：一个可以自动切换的Tab选项卡（滑动门）-滑动门选项卡