Html标签页的实现说明及结合JS基于对象特性的实现对比.docx

Html标签页的实现说明及结合JS基于对象特性的实现对比??????? 最近*海*原有系统需要进行改进，可能会将Flex改为Flex与jsp相结合的方式，好发挥两者的优势。这两天在做html页面，页面内容主要展现在标签页中，其基础效果图如下所示：??????? 为增强用户对标签页的体验效果，增加鼠标滑过时标签背景色更滑，选中某个标签后该标签应与标签内容形成一体等功能效果。标签页的标签可以使用列表来实现，标签页内容部分使用DIV来划分，此处仅显示DIV左右下三边框，上边框使用ul的下边框展示，便于选中某个标签时，通过控制标签下边框的隐藏，将标签与标签内容形成一个整体。代码实现如下所示：!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /title无标题文档/titlestyleul{ 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/headscriptvar 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;}/scriptbody divdiv /div divul id=ospsrc class=