JS+CSS实现的蓝色table选项卡效果


Posted in Javascript onOctober 08, 2015

本文实例讲述了JS+CSS实现的蓝色table选项卡效果。分享给大家供大家参考。具体如下:

这是一款蓝色的JS+Table类型的选项卡,部分标签内容存储在JS数组,个人感觉本特效不是太合理,因为内容从Js里输出会给读取内容造成很大麻烦,这里你就当学习一种JS编程方法,代码是需要改进的。

先来看看运行效果截图:

JS+CSS实现的蓝色table选项卡效果

在线演示地址如下:

具体代码如下:

<html>
<head>
<title>选项卡</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style> 
td,a,body{font-size:9pt;color:#000000;}
.DivAround_focus{cursor:pointer;background-color:#A1ACDB;border-right:solid 1px #A1ACDB;border-bottom:solid 1px #333333; border-left:solid 1px #C8CEEA; border-top:solid 1px #C8CEEA}
.DivAround_blur{cursor:pointer;background:#4D5C9F;border-right:solid 1px #eeeeee;border-bottom:solid 1px #333333; border-left:solid 1px #798ACC; border-top:solid 1px #A1ACDB;color:#FFFFFF}
.DivAround_content{background-color:#A1ACDB;border-right:solid 1px #888888;border-bottom:solid 1px #555555; border-left:0px; border-top:solid 1px #C8CEEA;}
</style>
</head>
<body>
<script language="javascript"> 
var AroundInfoArray=new Array();
AroundInfoArray[0]="脚本资源";
AroundInfoArray[1]="网页技巧集";
AroundInfoArray[2]="IT资讯坊";
function ChangeFocus(obj)
{
for(i=0;i<document.getElementById("leftButtonTAble").rows.length;i++)
{
 if(document.getElementById("leftButtonTAble").rows[i].cells[0]==obj)
 {
  document.getElementById("leftButtonTAble").rows[i].cells[0].className="DivAround_focus";
  document.getElementById("DivAroundContent").innerHTML=AroundInfoArray[i];
 }else{
  document.getElementById("leftButtonTAble").rows[i].cells[0].className="DivAround_blur";
 }
}
}
</script>
<table cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#6271B1"><tr><td width="84" valign="top">
   <table cellpadding="0" cellspacing="0" border="0" height="407" width="84" id="leftButtonTAble">
    <tr><td height="25" align="center" class="DivAround_focus" onClick="ChangeFocus(this)">脚本代码</td></tr>
    <tr><td height="25" align="center" class="DivAround_blur" onClick="ChangeFocus(this)">网页技巧</td></tr>
    <tr><td height="25" align="center" class="DivAround_blur" onClick="ChangeFocus(this)">IT坊</td></tr>
    <tr><td style="border-right:solid 1px #eeeeee"> </td></tr>
   </table>
  </td><td width="360">
   <table cellpadding="0" cellspacing="0" border="0" width="100%" class="DivAround_content">
    <tr><td height="406" valign="top" style="padding:4px" id="DivAroundContent">内容</td></tr>
   </table>
  </td></tr>
  </table>
  <script language="javascript">ChangeFocus(document.getElementById("leftButtonTAble").rows[0].cells[0]);
</script>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 浮动广告实现代码
Dec 25 Javascript
学习JavaScript设计模式(接口)
Nov 26 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
Vue起步(无cli)的啊教程详解
Apr 11 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
JavaScript实现随机五位数验证码
Sep 27 Javascript
分享五个有用的jquery小技巧
Oct 08 #Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 #Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 #Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 #Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 #Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 #Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 #Javascript
You might like
php数组添加元素方法小结
2014/12/20 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
鼠标图片振动代码
2006/07/06 Javascript
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
jquery根据一个值来选中select下的option实例代码
2016/08/29 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
vue实现记事本功能
2019/06/26 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
基于python 处理中文路径的终极解决方法
2018/04/12 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
python else语句在循环中的运用详解
2020/07/06 Python
英国口碑最好的的维他命胶囊品牌:Myvitamins(有中文站)
2016/12/03 全球购物
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
服装设计专业毕业生推荐信
2013/11/09 职场文书
土木工程专业个人求职信
2013/12/05 职场文书
植树节口号
2014/06/21 职场文书
会议室标语
2014/06/21 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
新教师个人总结
2015/02/06 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
实践论读书笔记
2015/06/29 职场文书
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python