JS+CSS实现的经典tab选项卡效果代码
网络编程 2021-07-04 21:03www.168986.cn编程入门
这篇文章主要介绍了JS+CSS实现的经典tab选项卡效果代码,通过简单的鼠标事件触发js函数实现针对页面元素的遍历与样式变换功能,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS+CSS实现的经典tab选项卡效果代码。分享给大家供大家参考。具体如下:
这是一款经典的JavaScript+CSS tab选项卡代码,由以前的一款改写而成,自认为不错的东西,发上来分享吧。
运行效果截图如下:
在线演示地址如下:
具体代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://.w3./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-: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="_">全真通数字商务平台是基于PKI体系,通过加密、签名、认证等手段,依据我国的数字签名法,在Inter上建立的一套安全、可信、具有法律效力的电子文件交换平台。为数字商务和数字政务服务!是我国数字签名法最有价值的推广应用产品!</a></li> </ul> </div> <div class="normal" id="list_2"> <ul> <li> <a href="products.aspx" target="_">基于数字中继和模拟线路并结合互联网形成了面向企业和政府用户传真收发服务的传真服务系统,集传真的管理和收发于一体,为企业和政府提供智能传真解决方案。</a></li> </ul> </div> <div class="normal" id="list_3"> <ul> <li> <a href="products.aspx" target="_">基于PKI体系,结合数字证书的应用为企业和政府提供的身份认证、加密、签名的技术解决方案,实现用户身份的可鉴别性、通道的安全性、文件的安全性、主机的安全性等系列产品。</a></li> </ul> </div> </div> </div> </body> </html>
希望本文所述对大家的JavaScript程序设计有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程