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 相关文章推荐
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
jQuery动态地获取系统时间实现代码
May 24 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
JS实现简单路由器功能的方法
May 27 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
浅谈如何实现easyui的datebox格式化
Jun 12 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
Aug 23 jQuery
利用jqprint插件打印页面内容的实现方法
Jan 09 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
JavaScript Event Loop相关原理解析
Jun 10 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 伪造本地文件包含漏洞的代码
2011/11/03 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
php排序算法实例分析
2016/10/17 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
PHP session垃圾回收机制实例分析
2019/06/28 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
Dom在ajax技术中的作用说明
2010/10/25 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
python中Flask框架简单入门实例
2015/03/21 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
python实现程序重启和系统重启方式
2020/04/16 Python
Python中zip函数如何使用
2020/06/04 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
python源文件的字符编码知识点详解
2021/03/04 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
大学生军训自我鉴定
2014/02/12 职场文书
大课间活动实施方案
2014/03/06 职场文书
人民调解协议书范本
2014/10/11 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
商场圣诞节活动总结
2015/05/06 职场文书