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代码
Sep 02 Javascript
JavaScript中的函数模式详解
Feb 11 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
Jun 20 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
jQuery表单验证之密码确认
May 22 jQuery
详解JS函数stack size计算方法
Jun 18 Javascript
vue服务端渲染缓存应用详解
Sep 12 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
微信小程序实现时间进度条功能
Nov 17 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提取中文首字母
2008/04/09 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
深入理解Node.js中通用基础设计模式
2017/09/19 Javascript
angularJS开发注意事项
2018/05/26 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
Python入门篇之函数
2014/10/20 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
Flask-Mail用法实例分析
2018/07/21 Python
通过Python实现一个简单的html页面
2020/05/16 Python
python是怎么被发明的
2020/06/15 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
打印机墨盒:123Inkjets
2017/02/16 全球购物
民族精神月活动总结
2014/08/28 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
MySQL创建管理RANGE分区
2022/04/13 MySQL