jQuery蜂巢布局关键词标签代码

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

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

以下是 jQuery蜂巢布局关键词标签代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>jQuery蜂巢布局关键词标签代码</title>
<meta http-equiv="X-UA-Compatible" content=”IE=Edge,chrome=1″ />
<meta name="renderer" content="webkit">
<style type="text/css">
	.Ct{
		width:1000px;
		margin:0 auto;
	}
	.ywPart1{
		width: 310px;
		margin: 0 auto;
		padding: 20px 10px 20px 30px;
	}

	/**蜂巢样式***/
	.hex {
		float: left;
		margin-left: 2px;
		margin-bottom: -18px;
		cursor: pointer;
	}
	.hex .hex_top {
		width: 0;
		border-bottom: 20px solid #f0ce8b;
		border-left: 35px solid transparent;
		border-right: 35px solid transparent;
		margin-top: -1px\9\0;
		margin-top: 0px\0;
	}
	.hex .hex_middle {
		width: 70px;
		height: 30px;
		line-height: 30px;
		background: #f0ce8b;
		text-align: center;
		font-family: "宋体";
		color: #333333;
	}
	.hex .hex_bottom {
		width: 0;
		border-top: 20px solid #f0ce8b;
		border-left: 35px solid transparent;
		border-right: 35px solid transparent;
		margin-top: -1px\9\0;
		margin-top: 0px\0;
	}
	.hex-row {
		clear: left;
	}
	.hex-row.even {
		margin-left: 38px;
	}
	.hex-row.odd {
		margin-right: 38px;
	}

	.hex.hexActive .hex_top {
		width: 0;
		border-bottom: 20px solid #86ccac;
		border-left: 35px solid transparent;
		border-right: 35px solid transparent;
		margin-top: -1px\9\0;
		margin-top: 0px\0;
	}
	.hex.hexActive .hex_middle {
		width: 70px;
		height: 30px;
		line-height: 30px;
		background: #86ccac;
		text-align: center;
		font-family: "宋体";
		color: #FFFFFF;
	}
	.hex.hexActive .hex_bottom {
		width: 0;
		border-top: 20px solid #86ccac;
		border-left: 35px solid transparent;
		border-right: 35px solid transparent;
		margin-top: -1px\9\0;
		margin-top: 0px\0;
	}
	/**蜂巢样式***/
</style>
</head>
<body>
<div class="Ct">
<div class="ywPart1" id="hexDiv">
	<!--
		描述：蜂巢
	-->
	<div class="hex hexActive" name="hexBlcok">
		<div class="hex_top"></div>
		<div class="hex_middle">首页</div>
		<div class="hex_bottom"></div>
	</div>
	<div class="hex" name="hexBlcok">
		<div class="hex_top"></div>
		<div class="hex_middle">社区</div>
		<div class="hex_bottom"></div>
	</div>
	<div class="hex" name="hexBlcok">
		<div class="hex_top"></div>
		<div class="hex_middle">导航</div>
		<div class="hex_bottom"></div>
	</div>
	<div class="hex" name="hexBlcok">
		<div class="hex_top"></div>
		<div class="hex_middle">商城</div>
		<div class="hex_bottom"></div>
	</div>
	<div class="hex hex-row even" name="hexBlcok">
		<div class="hex_top"></div>
		<div class="hex_middle">文件</div>
		<div class="hex_bottom"></div>
	</div>
	<div class="hex" name="hexBlcok">
		<div class="hex_top"></div>
		<div class="hex_middle">视频</div>
		<div class="hex_bottom"></div>
	</div>
	<div class="hex" name="hexBlcok">
		<div class="hex_top"></div>
		<div class="hex_middle">应用商店</div>
		<div class="hex_bottom"></div>
	</div>
	<div class="hex hex-row" name="hexBlcok">
		<div class="hex_top"></div>
		<div class="hex_middle">游戏</div>
		<div class="hex_bottom"></div>
	</div>
	<div class="hex" name="hexBlcok">
		<div class="hex_top"></div>
		<div class="hex_middle">动漫</div>
		<div class="hex_bottom"></div>
	</div>
	<div class="hex" name="hexBlcok">
		<div class="hex_top"></div>
		<div class="hex_middle">邮箱</div>
		<div class="hex_bottom"></div>
	</div>
	<div class="hex" name="hexBlcok">
		<div class="hex_top"></div>
		<div class="hex_middle">其他</div>
		<div class="hex_bottom"></div>
	</div>
	<div class="ClearFloat"></div>
</div>
</div>
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script>
$("#hexDiv").find("div[name='hexBlcok']").on("click",function(){
	$(this).addClass("hexActive");
	$(this).siblings("div[name='hexBlcok']").removeClass("hexActive");
});
</script>
</body>
</html>

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