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

最新推荐文章于 2023-12-20 21:16:42 发布

shierqu

最新推荐文章于 2023-12-20 21:16:42 发布

阅读量3k

点赞数 4

分类专栏： html/div+css/JS/Ajax/jsp/Flex 文章标签： html function div iframe javascript border

本文链接：https://blog.csdn.net/shierqu/article/details/7254782

版权

本文探讨了在海*原有系统改版中，如何实现HTML标签页的效果，包括鼠标滑过时的视觉反馈和选中标签的集成效果。通过使用列表和DIV元素，实现了内容展示，并讨论了使用JavaScript控制DIV或iFrame展示不同标签内容的方法。同时，通过对比JavaScript的基于对象特性和面向对象编程的区别，展示了两种不同的标签页实现策略，强调了选择设计方式应结合实际需求和后续开发的便利性。

摘要由CSDN通过智能技术生成

最近*海*原有系统需要进行改进，可能会将Flex改为Flex与jsp相结合的方式，好发挥两者的优势。这两天在做html页面，页面内容主要展现在标签页中，其基础效果图如下所示：

为增强用户对标签页的体验效果，增加鼠标滑过时标签背景色更滑，选中某个标签后该标签应与标签内容形成一体等功能效果。标签页的标签可以使用列表来实现，标签页内容部分使用DIV来划分，此处仅显示DIV左右下三边框，上边框使用ul的下边框展示，便于选中某个标签时，通过控制标签下边框的隐藏，将标签与标签内容形成一个整体。代码实现如下所示：

<!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>
<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:30