JS+CSS实现的经典tab选项卡效果代码


Posted in Javascript onSeptember 16, 2015

本文实例讲述了JS+CSS实现的经典tab选项卡效果代码。分享给大家供大家参考。具体如下:

这是一款经典的JavaScript+CSS tab选项卡代码,由以前的一款改写而成,自认为不错的东西,发上来分享吧。

运行效果截图如下:

JS+CSS实现的经典tab选项卡效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>选项卡</title>
<script type="text/javascript"> 
</script>
<style type="text/css"> 
 * { margin:0; padding:0; word-break:break-all; }
 h1, h2, h3, h4, h5, h6 { font-size:1em; }
 a { color:#333; text-decoration:none; }
 a:hover { text-decoration:underline; }
 ul, li { list-style:none; }
 fieldset, img { border:none; }
 #hotnews { width:260px; margin:1px; margin-left:auto; margin-right:auto;font-size:12px;}
 #hotnews_caption { width:260px; overflow:hidden; border-bottom:1px solid #FAFAFA; }
 #hotnews_caption ul { float:right; }
 #hotnews_caption ul li { float:left; border-left:1px solid #FFF; width:85px; line-height:25px; text-align:center; cursor:pointer;font-size:12px; }
 #hotnews_caption .normal { background:#E4E4E4; }
 #hotnews_caption .current{ background:#C2130E; color:#FFF; }
 #hotnews_content {}
 #hotnews_content .normal { display:none; }
 #hotnews_content .current { display:block; }
 #hotnews_content ul { padding:8px 0 0 5px; }
 #hotnews_content ul li a { font-size:12px;letter-spacing:1pt;line-height:14pt;}
</style>
<script type="text/javascript"> 
function secBoard(elementID,listName,n) {
 var elem = document.getElementById(elementID);
 var elemlist = elem.getElementsByTagName("li");
 for (var i=0; i<elemlist.length; i++) {
 elemlist[i].className = "normal";
 var m = i+1;
 document.getElementById(listName+"_"+m).className = "normal";
 }
 elemlist[n-1].className = "current";
 document.getElementById(listName+"_"+n).className = "current";
}
</script>
</head>
<body style=" margin-top:15px;">
<div id="hotnews">
 <div id="hotnews_caption">
 <ul>
  <li class="current" onmouseover="secBoard('hotnews_caption','list',1);">数字商务平台</li>
  <li class="normal" onmouseover="secBoard('hotnews_caption','list',2);">4GFax传真服务</li>
  <li class="normal" onmouseover="secBoard('hotnews_caption','list',3);">信息安全服务</li>
 </ul>
 </div>
 <div id="hotnews_content">
 <div class="current" id="list_1">
  <ul>
  <li>        <a href="products.aspx" target="_top">全真通数字商务平台是基于PKI体系,通过加密、签名、认证等手段,依据我国的数字签名法,在Internet上建立的一套安全、可信、具有法律效力的电子文件交换平台。为数字商务和数字政务服务!是我国数字签名法最有价值的推广应用产品!</a></li>  
  </ul> 
 </div>
 <div class="normal" id="list_2">
  <ul>
  <li>        <a href="products.aspx" target="_top">基于数字中继和模拟线路并结合互联网形成了面向企业和政府用户传真收发服务的传真服务系统,集传真的管理和收发于一体,为企业和政府提供智能传真解决方案。</a></li>
  </ul>
 </div>
 <div class="normal" id="list_3">
  <ul>
  <li>        <a href="products.aspx" target="_top">基于PKI体系,结合数字证书的应用为企业和政府提供的身份认证、加密、签名的技术解决方案,实现用户身份的可鉴别性、通道的安全性、文件的安全性、主机的安全性等系列产品。</a></li>
  </ul>
 </div>
 </div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
JavaScript生成验证码并实现验证功能
Sep 24 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 Javascript
vue登录路由验证的实现
Dec 13 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 Javascript
修改NPM全局模式的默认安装路径的方法
Dec 15 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 #Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 #Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 #Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 #Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 #Javascript
jQuery实现图片轮播特效代码分享
Sep 15 #Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 #Javascript
You might like
一个PHP的String类代码
2010/04/20 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
php图片上传类 附调用方法
2016/05/15 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
jquery绑定事件 bind和on的用法与区别分析
2020/05/22 jQuery
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
python根据出生日期返回年龄的方法
2015/03/26 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
python实现控制台打印的方法
2019/01/12 Python
python基于opencv检测程序运行效率
2019/12/28 Python
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
小学英语教学反思
2014/01/30 职场文书
应届毕业生自荐信
2014/05/28 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
违纪检讨书
2015/01/27 职场文书
医学生自荐信范文
2015/03/05 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
停水通知
2015/04/16 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang