JS实现不规则TAB选项卡效果代码
作者:企鹅 发布时间:2024-06-20 03:54:32
标签:JS,TAB,选项卡
本文实例讲述了JS实现不规则TAB选项卡效果代码。分享给大家供大家参考。具体如下:
这是一款不规则TAB选项卡效果,将中规中矩的方角换成了不规则的圆角,也就是这一换,倒让浏览者新鲜了不少,也使选项卡增多了几份灵感,不是吗?
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/js-box-tab-nav-style-menu-codes/
具体代码如下:
<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程序设计有所帮助。
0
投稿
猜你喜欢
- 本文实例为大家分享了pygame模块实现坦克大战游戏的具体代码,供大家参考,具体内容如下首先,第一步,游戏简单素材的准备。炮弹,炮弹,坦克移
- Null模式我想每个人都有一种经历,为了获取某属性,但是有时候属性是None,那么需要你做异常处理, 而假如你想节省这样的条件过滤的代码,可
- 在matplotlib官网看到了第三方库numpngw的简介,利用该库作为插件可以辅助matplotlib生成png动画。numpngw概述
- 本文实例讲述了JS实现的倒计时效果。分享给大家供大家参考,具体如下:我们经常会看到某些网站在注册的时候喜欢搞个按钮倒计时的效果,就是多少秒之
- 1、更新整张表,如果某一行数据的某一列的值为空,那么让他和另一列字段的值相等UPDATE ot_tgbz set update_day=if
- 本博客详细为你解释 Python Flask 框架下的 HTML 文件压缩内容,其第三方模块也可用在其他框架中。本案例是基于 Python
- 对于一个多元函数 用牛顿法求其极小值的迭代格式为其中 为函数 的梯度向量, 为函数 的Hesse(Hessian)矩阵。上述牛顿法
- 首先,简单介绍一下EXECL中工作簿和工作表的区别:工作簿的英文是BOOK(WORKBOOK),工作表的英文是SHEET(WORKSHEET
- 组件的基本使用注册组件注册组件就是利用Vue.component()方法,先传入一个自定义组件的名字,然后传入这个组件的配置。 Vue.co
- browsercookie 知识铺垫第一个要了解的知识点是使用 browsercookie 获取浏览器 cookie ,该库使用命令 pip
- 在操作系统的文件中,还存在着一种我们可以自己定义的文件属性。这些属性不是保存在文件内容中,也不是直接可以通过 ls -al 所能看到的内容。
- 前言ORDER BY 字段名 升序/降序,相信进来的朋友都认识这个排序语句,但遇到一些特殊的排序,单单使用字段名就无法满足需求了,下面给大家
- 昨天在书上看到SQL语句优化时,where条件顺序不同,性能不同,这个建议在Oracle11G版本还合适吗?方式1优于方式2? 方式1: s
- 大多的MySQL都是装在Linux上的,而我们的本机上一般都会装MySQL-Front.那如何用MySQL-Front连接远端Linux系统
- 1.问题描述当我们在实用ElementUI组件完成项目的时候可能会遇到这样的需求,比如:新建一个活动,需要定义活动的时间范围;因此我们在新建
- 本文实例讲述了PHP操作MySQL中BLOB字段的方法。分享给大家供大家参考,具体如下:1、MySQL中BLOB字段类型BLOB类型的字段用
- 前言由于安装某个项目的执行文件,提示要卸载MySQL以便它自身MySQL安装,然后我禁用了MYSQL服务,再把这个文件夹删除后,发现还是提示
- 新下载了一个Pycharm,建了个小demo,期间产生了一个sqlite3文件,由于是第一次打开,就弹出选择打开方式的对话框,手一块直接点了
- 这个主要应用于,获取用户输入的时候,防止用户不小心,多输入了一个空格,导致验证无法通过,多用于用户名跟密码的,好多情况下,大家复制的winr
- 摘要:本篇文章介绍了ORACLE数据库的新特性—分区管理,并用例子说明使用方法。 关键词:ORACLE,分区 一、 分区概述: 为了简化数据