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 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
自动化测试读写64位操作系统的注册表
Aug 15 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
vue 插值 v-once,v-text, v-html详解
Jan 19 Javascript
AngularJS日期格式化常见操作实例分析
May 17 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 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获取网页里所有图片并存入数组的方法
2015/04/06 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
jquery tab插件制作实现代码
2010/06/22 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
2014/03/12 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
Vue分页效果与购物车功能
2019/12/13 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
python提取字典key列表的方法
2015/07/11 Python
python的变量与赋值详细分析
2017/11/08 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
翻译专业应届生求职信
2013/11/23 职场文书
报考公务员诚信承诺书
2014/08/29 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
烈士陵园观后感
2015/06/08 职场文书
公务员处分决定书
2015/06/25 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
python绘制云雨图raincloud plot
2022/08/05 Python