原创力文档- 1、本文档共9页，可阅读全部内容。
- 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
- 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
查看更多
Html标签页的实现说明及结合JS基于对象特性的实现对比
Html标签页的实现说明及结合JS基于对象特性的实现对比??????? 最近*海*原有系统需要进行改进，可能会将Flex改为Flex与jsp相结合的方式，好发挥两者的优势。这两天在做html页面，页面内容主要展现在标签页中，其基础效果图如下所示：??????? 为增强用户对标签页的体验效果，增加鼠标滑过时标签背景色更滑，选中某个标签后该标签应与标签内容形成一体等功能效果。标签页的标签可以使用列表来实现，标签页内容部分使用DIV来划分，此处仅显示DIV左右下三边框，上边框使用ul的下边框展示，便于选中某个标签时，通过控制标签下边框的隐藏，将标签与标签内容形成一个整体。代码实现如下所示：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>ul{ border-bottom:1px solid #3366aa;padding:0 0 27px 0;margin:0;width:600px;margin-bottom:0;}li{float:left; display:inline;list-style:none; margin:0 5px 0 0;line-height:26px;padding:0 16px;text-align:center;border:1px solid #cccccc;background-color:#CFE0F2; border-bottom:0;} .selected{ border:1px solid #3366aa;color:#34B4BD; border-bottom:1px solid #ffffff;background-color:#ffffff; }#acceptContent ,#processContent ,#associateWorkOrder ,#processCourse{display:none;border:1px solid #3366aa;border-top:1px solid #ffffff;width:600px;height:300px;font-weight::bold;margin-top:0;}#requireContent{display:block;border:1px solid #3366aa;border-top:1px solid #ffffff;width:600px;height:300px;font-weight::bold;margin-top:0;}</style></head><script>var obj;//记录选中标签，对其进行样式设置//鼠标滑过时function mouseOver(){event.srcElement.style.color = '#ffffff';event.srcElement.style.backgroundColor = '#006699';}//鼠标滑出时function mouseOut(){event.srcElement.style.color = "";event.srcElement.style.backgroundColor = "";}//鼠标单击选中标签时function onClick(showDiv){//点击时标签样式event.srcElement.style.color = "#34B4BD";event.srcElement.style.backgroundColor = "#ffffff";//设置选中标签的样式if(obj != null){obj.className="";}obj = event.srcElement;obj.className = "selected";//仅显示选中标签所对应内容requireContent.style.display = "none";acceptContent.style.display = "none";processContent.style.display = "none";associateWorkOrder.style.display = "none";processCourse.style.display = "none";showDiv.style.display = "block";}</scri
文档评论（0）