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 相关文章推荐
jQuery中需要注意的细节问题小结
Dec 06 Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
wap图片滚动特效无css3元素纯js脚本编写
Aug 22 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
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中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
php获取系统变量方法小结
2015/05/29 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
2013/05/17 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
vue-router 手势滑动触发返回功能
2018/09/30 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
js代码实现轮播图
2020/05/04 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
大学生饮食配送创业计划书
2014/01/04 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
个人租房协议书范本
2014/09/30 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
初中体育教学随笔
2015/08/15 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
如何使用SQL Server语句创建表
2022/04/12 SQL Server