js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)


Posted in Javascript onAugust 26, 2015

本文实例讲述了js+css实现的圆角边框TAB选项卡滑动门效果。实例包含两款CSS圆角代码,可鼠标点击,也可鼠标移动上去显示效果,分享给大家供大家参考。具体如下:
运行效果图:-------------------查看效果-------------------

js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的js+css实现的圆角边框TAB选项卡滑动门代码如下

<!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>js+css实现的圆角边框TAB选项卡滑动门代码</title>
<link href="css/jiaobenzhijia.css" type="text/css" rel="stylesheet" /><script type="text/javascript">
  function $(obj){return document.getElementById(obj)}
  function Tab(Xname,Cname,Lenght,j){for(i=1;i<Lenght;i++){eval("$('"+Xname+i+"').className='n2'");}eval("$('"+Xname+j+"').className='n1'");for(i=1;i<Lenght;i++){eval("$('"+Cname+i+"').style.display='none'");eval("$('"+Cname+j+"').style.display='block'");}}
</script>
</head>
<body>
<div style="width:500px;margin:0 auto">
 <p>onmouseover事件</p>
 <div class="Tab">
  <div class="title"> <a href="#" id="a1" class="n1" onmouseover="Tab('a','ax',6,1)"><span>ASP</span></a> <a href="#" id="a2" class="n2" onmouseover="Tab('a','ax',6,2)"><span>PHP</span></a> <a href="#" id="a3" class="n2" onmouseover="Tab('a','ax',6,3)"><span>DELPHI</span></a> <a href="#" id="a4" class="n2" onmouseover="Tab('a','ax',6,4)"><span>MOOTOOLS</span></a> <a href="#" id="a5" class="n2" onmouseover="Tab('a','ax',6,5)"><span>WECLCOME TO</span></a>
   <div></div>
  </div>
  <div class="tabcon">
   <ul id="ax1">
    <li><a href="#">JavaScript 经典效果集-第二期策划中 </a></li>
    <li><a href="#">老猫的理想制作w3school javascript 电子书 chm版 </a></li>
    <li><a href="#">发贴需知 | 新手入门 | 常见问题 | 精华整理 0722 </a></li>
   </ul>
   <ul id="ax2" style="display:none">
    <li><a href="#" target="_blank">Serv-U 6.3 雨林木风内部中文破解版</a></li>
    <li><a href="#" target="_blank">樱桃企业网站管理系统ASP v1.0</a></li>
    <li><a href="#" target="_blank">校无忧在线考试系统ASP版 v1.0</a></li>
   </ul>
   <ul id="ax3" style="display:none">
    <li><a href="#" target="_blank">CSS+Js制作的抽屉式菜单</a></li>
    <li><a href="#" target="_blank">4个简洁实用的CSS横向菜单,带搜索框</a></li>
    <li><a href="#" target="_blank">OpenCart 开源PHP网店 v1.4.94</a></li>
   </ul>
   <ul id="ax4" style="display:none">
    <li><a href="#">近期技术讨论贴(持续更新:12-10) </a></li>
    <li><a href="#">发贴需知 | 新手入门 | 常见问题 | 精华整理 0722 </a></li>
    <li><a href="#">关于奥运期间管理及只开放邀请注册的通知</a></li>
   </ul>
   <ul id="ax5" style="display:none">
    <li><a href="#" target="_blank">Serv-U 6.3 雨林木风内部中文破解版</a></li>
    <li><a href="#" target="_blank">樱桃企业网站管理系统ASP v1.0</a></li>
    <li><a href="#" target="_blank">校无忧在线考试系统ASP版 v1.0</a></li>
   </ul>
  </div>
 </div>
 <p>onclick事件</p>
 <div class="Tab">
  <div class="title"> <a href="#" id="b1" class="n1" onclick="Tab('b','bx',6,1)"><span>JAVA</span></a> <a href="#" id="b2" class="n2" onclick="Tab('b','bx',6,2)"><span>VB</span></a> <a href="#" id="b3" class="n2" onclick="Tab('b','bx',6,3)"><span>VC++</span></a> <a href="#" id="b4" class="n2" onclick="Tab('b','bx',6,4)"><span>JQUERY</span></a> <a href="#" id="b5" class="n2" onclick="Tab('b','bx',6,5)"><span>NEXT WHICH ONE……</span></a>
   <div></div>
  </div>
  <div class="tabcon">
   <ul id="bx1">
    <li><a href="#">JavaScript 经典效果集-第二期策划中 </a></li>
    <li><a href="#">老猫的理想制作w3school javascript 电子书 chm版 </a></li>
    <li><a href="#">发贴需知 | 新手入门 | 常见问题 | 精华整理 0722 </a></li>
   </ul>
   <ul id="bx2" style="display:none">
    <li><a href="#" target="_blank">CSS+Js制作的抽屉式菜单</a></li>
    <li><a href="#" target="_blank">4个简洁实用的CSS横向菜单,带搜索框</a></li>
    <li><a href="#" target="_blank">OpenCart 开源PHP网店 v1.4.94</a></li>
   </ul>
   <ul id="bx3" style="display:none">
    <li><a href="#" target="_blank">Serv-U 6.3 雨林木风内部中文破解版</a></li>
    <li><a href="#" target="_blank">樱桃企业网站管理系统ASP v1.0</a></li>
    <li><a href="#" target="_blank">校无忧在线考试系统ASP版 v1.0</a></li>
   </ul>
   <ul id="bx4" style="display:none">
    <li><a href="#">近期技术讨论贴(持续更新:12-10) </a></li>
    <li><a href="#">发贴需知 | 新手入门 | 常见问题 | 精华整理 0722 </a></li>
    <li><a href="#">关于奥运期间管理及只开放邀请注册的通知</a></li>
   </ul>
   <ul id="bx5" style="display:none">
    <li><a href="#" target="_blank">CSS+Js制作的抽屉式菜单</a></li>
    <li><a href="#" target="_blank">4个简洁实用的CSS横向菜单,带搜索框</a></li>
    <li><a href="#" target="_blank">OpenCart 开源PHP网店 v1.4.94</a></li>
   </ul>
  </div>
 </div>
</div>
</body>
</html>

以上就是为大家分享的js+css实现的圆角边框TAB选项卡滑动门代码,希望大家可以喜欢。

Javascript 相关文章推荐
javascript 单选框,多选框美化代码
Aug 01 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
vue中slot(插槽)的介绍与使用
Nov 12 Javascript
js Array.slice的8种不同用法示例
Jul 10 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 #Javascript
jQuery网页选项卡插件rTabs用法实例分析
Aug 26 #Javascript
jQuery实现带滑动条的菜单效果代码
Aug 26 #Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
Aug 26 #Javascript
js鼠标点击图片切换效果代码分享
Aug 26 #Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 #Javascript
javascript中的五种基本数据类型
Aug 26 #Javascript
You might like
雄兵连:第三季确定会出,不过时间未定,鹤熙是第三季的主角!
2020/03/13 国漫
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
PHP字符串 ==比较运算符的副作用
2009/10/21 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
JavaScript对象创建及继承原理实例解剖
2013/02/28 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python使用cx_Oracle调用Oracle存储过程的方法示例
2017/10/07 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
有趣的广告词
2014/03/18 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
师范大学生求职信
2014/06/13 职场文书
病危通知书样本
2015/04/17 职场文书
外出学习心得体会范文
2016/01/18 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
Python基础之hashlib模块详解
2021/05/06 Python
德劲DE1102数字调谐收音机机评
2022/04/07 无线电