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 相关文章推荐
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
Sep 24 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
vue实现滑动解锁功能
Mar 03 Vue.js
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中的string类型使用说明
2010/07/27 PHP
php header功能的使用
2013/10/28 PHP
PHP中echo和print的区别
2014/08/28 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
js中匿名函数的N种写法
2010/09/08 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
过期软件破解办法实例详解
2017/01/04 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
JS实现二维数组横纵列转置的方法
2018/04/17 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
js实现简易ATM功能
2020/10/27 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
js canvas实现五子棋小游戏
2021/01/22 Javascript
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
在Python中使用M2Crypto模块实现AES加密的教程
2015/04/08 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
Python将string转换到float的实例方法
2019/07/29 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
美国轮胎网站:Priority Tire
2018/11/28 全球购物
网络优化专员求职信
2014/05/04 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
会计工作能力自我评价
2015/03/05 职场文书
酒店前台岗位职责
2015/04/16 职场文书
社区党建工作总结2015
2015/05/13 职场文书