这篇文章主要为大家详细介绍了两种js css实现的圆角边框标签选项卡滑动门效果，很实用的代码，推荐给大家，有需要的小伙伴可以参考下
本文实例讲述了js css实现的圆角边框标签选项卡滑动门效果。实例包含两款半铸钢钢性铸铁(铸造半钢)圆角代码，可鼠标点击，也可鼠标移动上去显示效果，分享给大家供大家参考。具体如下：
运行效果图： - 查看效果-
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的js css实现的圆角边框标签选项卡滑动门代码如下
！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www。w3。org/TR/XHTML 1/DTD/XHTML 1-过渡。' DTD '
html xmlns=' http://。w3。org/1999/XHTML ' head
meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /
标题js css实现的圆角边框标签选项卡滑动门代码/标题
链接href=' CSS/jiaobenzhijia。CSS ' type=' text/CSS ' rel='样式表'/script type=' text/JavaScript '
函数$(obj){返回文档。getelementbyid(obj)}
function Tab(Xname，Cname，Lenght，j){ for(I=1；ilengti){ eval(' ' Xname I ' ').);} eval(' ' ' Xname j ' ').n1 ' ')；for(I=1；iLenghtI){ eval(' ' ' Cname I ' ')。风格。display=' none ' ')；eval(' $(' ' Cname j ' ')。风格。display=' block ' ')；}}
/脚本
/头
身体
div style=' width:500 px；边距：0自动'
ponmouseover事件/p
div class='Tab '
div class=' title ' a href=' # ' id=' a1 ' class=' n1 ' onmouseover=' Tab(' a '，' ax '，6，1)' span ASP/span a href=' # ' id=' a2 ' class=' N2 ' onmouseover=' Tab(' a '，' ax '，6，2)' span PHP/span/a href=' # ' id=' a3 ' class=' N2 ' onmouseover=' Tab(' a '，' ax '，6，3)'spanDELPHI/span
分区/分区
/div
div class='tabcon '
ul id='ax1 '
lia href='#'JavaScript经典效果集-第二期策划中/a/李
lia href='# '老猫的理想制作w3school javascript电子书chm版/a/李
lia href='# '发贴需知|新手入门|常见问题|精华整理0722/a/李
/ul
ul id='ax2' style='display:none '
lia href=' # ' target=' _ blank ' serv-U 6.3雨林木风内部中文破解版/a/李
lia href='#' target='_blank '樱桃企业网站管理系统ASP v1.0版版/a/李
lia href='#' target='_blank '校无忧在线考试系统动态服务器页面版1.0版/a/李
/ul
ul id='ax3' style='display:none '
lia href=' # ' target=' _ blank ' CSS Js制作的抽屉式菜单/a/李
lia href='#' target='_blank'4个简洁实用的半铸钢钢性铸铁(铸造半钢)横向菜单，带搜索框/a/李
lia href='#' target='_blank '打开购物车开源服务器端编程语言(专业超文本预处理器的缩写)网店1994年4月1日
/ul
ul id='ax4' style='display:none '
lia href='# '近期技术讨论贴（持续更新：12-10) /a/li
lia href='# '发贴需知|新手入门|常见问题|精华整理0722/a/李
lia href='# '关于奥运期间管理及只开放邀请注册的通知/a/李
/ul
ul id='ax5' style='display:none '
lia href=' # ' target=' _ blank ' serv-U 6.3雨林木风内部中文破解版/a/李
lia href='#' target='_blank '樱桃企业网站管理系统ASP v1.0版版/a/李
lia href='#' target='_blank '校无忧在线考试系统动态服务器页面版1.0版/a/李
/ul
/div
/div
庞里克事件/p
div class='Tab '
div class=' title ' a href=' # ' id=' B1 ' class=' n1 ' onclick=' Tab(' b '，' bx '，6，1)' span Java/span/a href=' # ' id=' B2 ' class=' N2 ' onclick=' Tab(' b '，' bx '，6，2)' span VB/span/a href=' # ' id=' B3 ' class=' N2 ' onclick=' Tab(' b '，' bx '，6，3)' span VC/span/a href
分区/分区
/div
div class='tabcon '
ul id='bx1 '
lia href='#'JavaScript经典效果集-第二期策划中/a/李
lia href='# '老猫的理想制作w3school javascript电子书chm版/a/李
Lia=' # '发帖技巧|初学者|常见问题|精华整理0722/a/李
/ul
ul id='bx2' style='display:none '
Lia=' # ' target=' _ blank制作的抽屉菜单JS /a/li
Lia=' #' target=' _ blank' 4带有搜索框的简洁实用的CSS水平菜单/a/li
Lia=' #' target=' _ blank' OpenCart开源PHP网店v1.4.94/a/li
/ul
ul id='bx3' style='display:none '
lia=' # ' target=' _ blank ' serv-u 6.3雨林木风内部中文破解版/a/li
Lia=' #' target=' _ blank' Cherry企业网站管理系统ASP v1.0/a/li
Lia=' #' target=' _ blank '学校无忧在线考试系统ASP版本v1.0/a/li
/ul
ul id='bx4' style='display:none '
Lia=' # '最近的技术讨论帖子(持续更新：12-10) /a/li
Lia=' # '发帖技巧|初学者|常见问题|精华整理0722/a/李
Lia=' # '关于奥运会期间管理和仅限受邀者报名的通知/a/li
/ul
ul id='bx5' style='display:none '
Lia=' # ' target=' _ blank制作的抽屉菜单JS /a/li
Lia=' #' target=' _ blank' 4带有搜索框的简洁实用的CSS水平菜单/a/li
Lia=' #' target=' _ blank' OpenCart开源PHP网店v1.4.94/a/li
/ul
/div
/div
/div
/body
/html
以上是分享给大家的js css实现的带圆角边框和TAB tab的推拉门代码。希望你能喜欢。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。