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

2024-09-28 06:57:28

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

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的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实现tabs选项卡切换效果(自写原生js)

现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果.今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出. 效果图如下: html代码: 复制代码代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</
JS+CSS实现的日本门户网站经典选项卡导航效果

本文实例讲述了JS+CSS实现的日本门户网站经典选项卡导航效果.分享给大家供大家参考.具体如下: 这里介绍的是来自日本门户网站的一款CSS+JavaScript选项卡导航菜单,银灰色风格,看来日本人和中国人的审美是接近的,都喜欢这种风格,如果你要用的话,直接拷贝代码部分到你的网页中,注意你需要修改编码才行,日本的编码和中国可是不一样哦,只要把文字改为中国的就行了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-japan-web-
JS+CSS实现的蓝色table选项卡效果

本文实例讲述了JS+CSS实现的蓝色table选项卡效果.分享给大家供大家参考.具体如下: 这是一款蓝色的JS+Table类型的选项卡,部分标签内容存储在JS数组,个人感觉本特效不是太合理,因为内容从Js里输出会给读取内容造成很大麻烦,这里你就当学习一种JS编程方法,代码是需要改进的. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-blue-table-style-nav-demo/ 具体代码如下: <html> <h
javascript css红色经典选项卡效果实现代码

本文实例为大家分享了js选项卡效果的具体实现代码,供大家参考,具体内容如下效果图: 实现代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> body{ font
javascript+css 新闻显示tab 选项卡效果

我们_新闻显示选项卡效果(javascript+css) 新闻排行国内国际社会网评新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河最高法:承诺不判赖昌星死刑没有超越法律程序物权法:满70年住宅建设用地使用权将自动续期弟弟被妻下药毒死男子买女尸为其配阴婚(图) 揭开郑州神枪手神秘面纱头号狙击手是近视眼美军高官:不排除和中国发生直接军事对抗可能浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕西方炒作"中国航母威胁论"称05年已正式服役女孩生活无法自理请人大代表递交安乐死议案建
JQuery 选项卡效果(JS与HTML的分离)

在实际应用过程中,只要保证选项卡模块结构代码的完整性,就可以任意添加N个同类选项卡,不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID. Javascript(jquery)代码如下: 复制代码代码如下: <script language="javascript" type="text/javascript"> $(document).ready(function(){ $("ul.menu li:first-child&
js实现tab选项卡函数代码

* { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font-size: 12px; padding-top: 0px; } BODY { padding-left: 20px; padding-top: 20px; } .wid240 { width: 242px; margin-bottom: 20px; } .wid180 { width: 182px; } .tab { border-b
JS+CSS实现自适应选项卡宽度的圆角滑动门效果

本文实例讲述了JS+CSS实现自适应选项卡宽度的圆角滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS打造自适应宽度的圆角滑动门,这里的圆角主要是靠一张背景图片去实现,所指的宽度是滑动门上的导航的宽度,不管文字有多少,它都会一直顺着下去,不会被内容所撑破,兼容性方面,兼容IE6/7/8,火狐未试,应该也兼容 . 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-auto-width-nav-tab-codes/ 具体代
JS+CSS实现的经典tab选项卡效果代码

本文实例讲述了JS+CSS实现的经典tab选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款经典的JavaScript+CSS tab选项卡代码,由以前的一款改写而成,自认为不错的东西,发上来分享吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio
JS+DIV+CSS排版布局实现美观的选项卡效果

本文实例讲述了JS+DIV+CSS排版布局实现美观的选项卡效果.分享给大家供大家参考.具体如下: 这是一个基于JavaScript的简单选项卡代码,陪新手练习一下Div+CSS排版的技巧,本选项卡可以继续美化修饰完善,选项卡在目前在众多网站上应用广泛,确实是一个很不错的网页布局方法. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-pbbj-nav-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

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

相关推荐

随机推荐