改编的一个滑动门代码

今天在源码爱好者上看到一个滑动门代码，改编了下，呵呵。

<!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 runat="server"> <title>漂亮淡蓝色滑动门代码</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> body { font-size:12px; } .normal { list-style: none; float: left; padding: 5px 2px 2px 2px; margin:0px 5px 0px 0px; width: 151px; text-align :center ; height:50px; vertical-align :middle ; cursor :pointer ; border-collapse :separate ; } .selected { list-style: none; float: left; padding: 5px 2px 2px 2px; margin:0px 5px 0px 0px; width: 151px; height:55px; text-align :center ; vertical-align :middle ; cursor :pointer ; background-color:#f8f8f8 ; } #divMainTab { float:left; margin: 0px; padding: 0px } .divContent { width: 793px; height: 400px; clear: both; border-style:solid; border-width:1px;} a{ text-decoration: none; color: #00ccff; } a:hover { text-decoration: underline; color: #cc0000; } </style> <mce:script language="javascript" type="text/javascript"></mce:script> </head> <body> <form id="form1" runat="server"> <div> <div id="divMainTab"> <ul style="list-style: none; margin: 0px; padding: 0px; border-collapse: collapse;" mce_style="list-style: none; margin: 0px; padding: 0px; border-collapse: collapse;"> <li id="li_1" class="selected" style="background-color:#F3B11D;" mce_style="background-color:#F3B11D;" οnmοuseοver="changeTab('1')"><a href="#" mce_href="#">最新更新</a> </li> <li id="li_2" class="normal" style="background-color:#1DA64E;" mce_style="background-color:#1DA64E;" οnmοuseοver="changeTab('2')"><a href="#" mce_href="#">阅读排行</a> </li> <li id="li_3" class="normal" style="background-color:#00B0C2;" mce_style="background-color:#00B0C2;" οnmοuseοver="changeTab('3')"><a href="#" mce_href="#">本月排行</a> </li> <li id="li_4" class="normal" style="background-color:#1757BB;" mce_style="background-color:#1757BB;" οnmοuseοver="changeTab('4')"><a href="#" mce_href="#">本日排行</a> </li> <li id="li_5" class="normal" style="background-color:#D146A3;" mce_style="background-color:#D146A3;" οnmοuseοver="changeTab('5')"><a href="#" mce_href="#">源码爱好者</a> </li> </ul> </div> <div id="div1" style ="display :block; border-color:#F3B11D;" class ="divContent"> 1号 </div> <div id="div2" style ="display :none" class ="divContent"> 2号 </div> <div id="div3" style ="display :none" class ="divContent"> 3号 </div> <div id="div4" style ="display :none" class ="divContent"> 4号 </div> <div id="div5" style ="display :none" class ="divContent"> 5号 </div> </div> </form> </body> </html>

改编的一个滑动门代码相关推荐

滑动门和翻转门实现的横竖双tab标签测试页面（附源码）
双tab可以用来表现二维数据的某一个单元.所以很多情况下还是比较有用的.但是很少人用这个而已.人们少用的原因比较多.反正我是比较少见的. 此版本至少测试版,只有IE6下进行了测试.FF和IE7一定会有 ...
Easy Slider: 功能强大简单易用的jQuery滑动门插件
FROM: http://paranp_w_picpath.com/easy-slider/ Easy Slider 是一个滑动门插件,支持任何图片或内容,当点击时实现横向或纵向滑动.它拥有一系列丰富 ...
html css纵向滑动列表,JS实现的简洁纵向滑动菜单(滑动门)效果
本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果.分享给大家供大家参考,具体如下: 这是一款纵向布局的CSS+JavaScript滑动门代码,相当简洁的手法来实现,如果对颜色不满意,你可以试着自 ...
css滑动门技术的应用,css 滑动门技术的介绍及实例分享
css 滑动门技术的介绍及实例分享发布时间:2009-10-15 12:48:01 作者:佚名我要评论可以这样说css滑动门技术是被刺激出来的,因为很多人认为css并不能做出漂亮的网页, ...
Mark一下，滑动门插件
2019独角兽企业重金招聘Python工程师标准>>> Sliding Panels - 滑动门插件 1)Colorful Sliders With jQuery &am ...
带绿色箭头指示的滑动门DIV效果
带箭头指向的首页滑动门特效代码,而且可以很方便的在滑动和鼠标点击之间切换,代码比以前的很多滑动门都简洁,而且效果相当舒服,宽度和高度根据你网页的大小可以自己修改,要注意CSS文件内的图片路径要一并修改 ...
一个简单的滑动门效果代码
//滑动门 function menu(a,idName,cssName) { for(i=1;i<=2;i++) { if(i==a) { ...
代码简洁的上方滑动门(选项卡tab)jquery插件可重复使用，淡入淡出效果(用)
代码简洁的滑动门(tab)jquery插件调用方法:"#tabs",".tab_con" 这里的#tabs是jquery选项卡的链接按钮的外层ID,.tab_c ...
【CSS】滑动门技术 ( 借助 CSS 精灵技术实现 | 外部标签设置左半部分背景图片 | 内部标签设置右半部分背景图片 | 鼠标经过更换背景 | 代码示例 )
文章目录一.滑动门技术 1.滑动门技术借助 CSS 精灵技术实现 2.外部标签设置左半部分背景图片 3.内部标签设置右半部分背景图片 4.鼠标经过时更换背景二.完整代码示例一.滑动门技术 1.滑 ...

改编的一个滑动门代码

改编的一个滑动门代码相关推荐

最新文章

热门文章