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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
将string解析为json的几种方式小结
Nov 11 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
layer弹出层取消遮罩的方法
Sep 25 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 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
关于时间计算的结总
2006/12/06 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
Js中使用正则表达式验证输入是否有特殊字符
2018/09/07 Javascript
vue实现PC端分辨率适配操作
2020/08/03 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
详解在Python程序中使用Cookie的教程
2015/04/30 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
如何用 Python 处理不平衡数据集
2021/01/04 Python
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
银行青年文明号事迹材料
2014/05/31 职场文书
工程索赔意向书
2014/08/30 职场文书
债务授权委托书范本
2014/10/17 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
Python内置数据结构列表与元组示例详解
2021/08/04 Python
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫