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 相关文章推荐
IE和Firefox下event事件杂谈
Dec 18 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
使用隐藏的new来创建对象
Mar 29 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
JS实现完全语义化的网页选项卡效果代码
Sep 15 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 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
openflashchart 2.0 简单案例php版
2012/05/21 PHP
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
解析PHP留言本模块主要功能的函数说明(代码可实现)
2013/06/25 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
JS实现在网页中弹出一个输入框的方法
2015/03/03 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
跟老齐学Python之??碌某?? target=
2014/09/12 Python
Python捕捉和模拟鼠标事件的方法
2015/06/03 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
用python实现对比两张图片的不同
2018/02/05 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
django从后台返回html代码的实例
2020/03/11 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
销售顾问工作计划书
2014/09/15 职场文书
课外活动总结
2015/02/04 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技