JS实现不规则TAB选项卡效果代码


Posted in Javascript onSeptember 16, 2015

本文实例讲述了JS实现不规则TAB选项卡效果代码。分享给大家供大家参考。具体如下:

这是一款不规则TAB选项卡效果,将中规中矩的方角换成了不规则的圆角,也就是这一换,倒让浏览者新鲜了不少,也使选项卡增多了几份灵感,不是吗?

运行效果截图如下:

JS实现不规则TAB选项卡效果代码

在线演示地址如下:

具体代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>不规则TAB选项卡效果</title>
<style type="text/css">
<!--
body,td{font-size: 12px;}
.tab{margin-top:100px}
#TabCon1{width:212px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;}
#TabCon2{width:212px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;}
.xixi1{width:212px;height:29px;line-height:29px;background-image:url(images/news_bghover1.gif);cursor:pointer;}
.xixi2{width:212px;height:29px;line-height:29px;background-image:url(images/news_bghover2.gif);cursor:pointer;}
.tab1{width:96px;height:29px;line-height:29px;float:left;text-align:center;cursor:pointer; color:#FFF;}
.tab2{width:116px;height:29px;line-height:29px;float:left;text-align:center;cursor:pointer;color:#000;}
-->
</style>
</head>
<body style="text-align:center">
<script type="text/javascript">
 function setTab03Syn ( i )
 {
  selectTab03Syn(i);
 }
 function selectTab03Syn ( i )
 {
  switch(i){
   case 1:
   document.getElementById("TabCon1").style.display="block";
   document.getElementById("TabCon2").style.display="none";
   document.getElementById("font1").style.color="#ffffff";
   document.getElementById("font2").style.color="#000000";
   break;
   case 2:
   document.getElementById("TabCon1").style.display="none";
   document.getElementById("TabCon2").style.display="block";
   document.getElementById("font1").style.color="#000000";
   document.getElementById("font2").style.color="#ffffff";
   break;
  }
 }
</script>
<div class="tab">
<div id="bg" class="xixi1">
<div id="font1" class="tab1" onMouseOver="setTab03Syn(1);document.getElementById('bg').className='xixi1'">新闻标签</div>
<div id="font2" class="tab2" onMouseOver="setTab03Syn(2);document.getElementById('bg').className='xixi2'">新闻标签</div>
</div>
<div id="TabCon1">不规则TAB选项卡效果</div>
<div id="TabCon2" style="display:none">不规则TAB选项卡效果2</div>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js function使用心得
May 10 Javascript
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
Uploadify上传文件方法
Mar 16 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 #Javascript
jQuery实现图片轮播特效代码分享
Sep 15 #Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 #Javascript
jQuery带进度条全屏图片轮播特效代码分享
Jun 28 #Javascript
JQuery实现图片轮播效果
Sep 15 #Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 #Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 #Javascript
You might like
随机广告显示(PHP函数)
2006/10/09 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
jquery tools 系列 scrollable学习
2009/09/06 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
实现js保留小数点后N位的代码
2014/11/13 Javascript
jQuery中:visible选择器用法实例
2014/12/30 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
AngularJs实现ng1.3+表单验证
2015/12/10 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
ES6箭头函数和扩展实例分析
2020/05/23 Javascript
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
Python中itertools模块用法详解
2014/09/25 Python
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
Django数据库表反向生成实例解析
2018/02/06 Python
Django的性能优化实现解析
2019/07/30 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
2017/08/18 HTML / CSS
简短的公司员工自我评价分享
2013/11/13 职场文书
《放飞蜻蜓》教学反思
2014/04/27 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
先进个人事迹材料
2014/12/29 职场文书
基层党建工作简报
2015/07/21 职场文书
三下乡活动心得体会
2016/01/23 职场文书
创业计划书之酒厂
2019/10/14 职场文书