jquery fieldset和legend标签代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery fieldset和legend标签代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>jquery fieldset和legend标签代码</title>
<style type="text/css">
.fieldset
{
	width:500px;
}
fieldset.scheduler-border
{
	border: 1px solid #428bca;
	padding: 1.4em 1.4em 1.4em 1.4em !important;
	margin: 0 0 1.5em 0 !important;
	-webkit-box-shadow: 0px 0px 0px 0px #000;
	box-shadow: 0px 0px 0px 0px #000;
}
legend.scheduler-border
{
	width: inherit; /* Or auto */
	padding: 0 10px; /* To give a bit of padding on the left and right */
	border-bottom: none;
	cursor: pointer;
	font-size: 16px;
	font-weight: 900;
	background-color: #428bca;
	color: #fffffb;
	border-radius: 10px;
}
</style>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
</head>
<body>
<center>
<div id="fieldset01" class="fieldset">
	<fieldset class="scheduler-border">
		<legend class="scheduler-border" title="点击可显示或隐藏">标题</legend>
		<div>
			这里是你的内容。。。
		</div>
	</fieldset>
</div>

<div id="fieldset02" class="fieldset">
	<fieldset class="scheduler-border">
		<legend class="scheduler-border" title="点击可显示或隐藏">标题</legend>
		<div>
			这里是你的内容。。。
		</div>
	</fieldset>
</div>

<div id="fieldset03" class="fieldset">
	<fieldset class="scheduler-border">
		<legend class="scheduler-border" title="点击可显示或隐藏">标题</legend>
		<div>
			这里是你的内容。。。
		</div>
	</fieldset>
</div>

<script type="text/javascript">
$("legend").bind("click", function () {
	var fieldDiv = $(this).siblings("div");
	if ($(fieldDiv).is(":hidden")) {
		$(fieldDiv).show();
		$(this).siblings("b").remove();
		$(this).css("background-color", "#428bca");
	} else {
		$(fieldDiv).hide();
		$(fieldDiv).after("<b>内容已隐藏</b>");
		$(this).css("background-color", "#918597");
	}
}).bind("mouseover", function () {
	var fieldDiv = $(this).siblings("div");
	if ($(fieldDiv).is(":hidden")) {
		$(this).css("background-color", "#428bca");
	} else {
		$(this).css("background-color", "#918597");
	}
}).bind("mouseout", function () {
	var fieldDiv = $(this).siblings("div");
	if ($(fieldDiv).is(":hidden")) {
		$(this).css("background-color", "#918597");
	} else {
		$(this).css("background-color", "#428bca");
	}
});
</script>
</center>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)