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 相关文章推荐
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
js 设置选中行的样式的实现代码
May 24 Javascript
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
谈谈node.js中的模块系统
Sep 01 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执行zip与rar解压缩方法实现代码
2010/12/05 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
Prototype Hash对象 学习
2009/07/19 Javascript
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
用JS实现一个TreeMenu效果分享
2011/08/28 Javascript
一个简单的js树形菜单
2011/12/09 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
JavaScript性能优化之小知识总结
2015/11/20 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
Python中urllib+urllib2+cookielib模块编写爬虫实战
2016/01/20 Python
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
python实现三次样条插值
2018/12/17 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
pytorch1.0中torch.nn.Conv2d用法详解
2020/01/10 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
聪明的粉丝购买门票的地方:TickPick
2018/03/09 全球购物
《我要的是葫芦》教学反思
2014/02/23 职场文书
聚美优品励志广告词
2014/03/14 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
大学生实习证明范本
2014/09/19 职场文书
个人维稳承诺书
2015/05/04 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
公司规章制度范本
2015/08/03 职场文书
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis