您的位置:首页> 日志> 前端技术 正文

 

这是菜单的内容,用div标签实现菜单:也可调为ul↓

<div class="mode_tab w350 fl" type="angel-tab">
	<div class="tab_hd" type="angel-menu">
		<pre> 
              <a href="#" type="m1">技术文章</a> 
              <a href="#" type="m2">个人心得</a> 
            </pre>
	</div>
	<div class="tab_bd">
		<div class="tab_botList" type="body1">
			<ul class="aticleListTab">
                           <li></li>
			</ul>
		</div>
		<div class="tab_botList" style="display:none;" type="body2">
			<ul class="aticleListTab">
                           <li></li>
			</ul>
		</div>
	</div>
</div>

这是CSS控制代码↓:

/* 浮动 */
.fl {
	float:left;
}
.fr {
	float:right;
}
/* 外边距 */
.mt10 {
	margin-top:10px;
}
.ml10 {
	margin-left:10px;
}
.mb10 {
	margin-bottom:10px;
}
.mr10 {
	margin-right:10px;
}
/*自定义宽度*/

.w350 {
	width:350px;
}

.w710 {
	width:710px;
}
/* 公用滑动门模块mode_tab */
.mode_tab {
	height:220px;
}
.mode_tab .tab_hd {
	height:31px;
	background:url(Images/back.png) no-repeat -360px -90px;
	padding-left:7px;
}
.mode_tab .tab_hd a {
	display:block;
	float:left;
	height:31px;
	width:101px;
	background:url(Images/back.png) no-repeat -140px -90px;
	text-align:center;
	line-height:28px;
	color:#fff;
	font-weight:bold;
}
.mode_tab .tab_hd a:hover {
	color:#f6ff00;
	text-decoration:none;
}
.mode_tab .tab_hd a.tab_active {
	background-position:-250px -90px;
	color:#f6ff00;
}
.mode_tab .tab_bd {
	height:187px;
	border:solid 1px #7f453f;
	border-top:0px;
	background:url(Images/mode_right_bd.png) repeat-x 0 0;
	padding:1px 10px 0 10px;
}
/* 全站通用列表 */
.aticleListTab li {
	display:block;
	height:25px;
	line-height:25px;
	border-bottom:dotted 1px #a3a3a3;
}
.aticleListTab li span {
	float:right;
	color:#999;
fo
}
.aticleListTab li a {
	display:block;
	text-indent:15px;
	background:url(Images/icon_2.gif) no-repeat 1px 8px;
}
.aticleListTab li a:hover {
	color:#e10000;
	text-decoration:none;
}

这是JS的控制代码:↓

<script type="text/javascript">
// 选项卡
jQuery.fn.extend({
	createTab: function(){
		//寻在body
		$(this).each(function(){
			var menus = $("div[class='tab_botList']", $(this));
			menus.each(function(i){
				if (0 != i) {
					$(this).hide();
				}
			});
			//处理事件
			$("div[type='angel-menu'] >a", this).each(function(i){
				if (0 == i) {
					$(this).addClass('tab_active');
				}
				else {
					$(this).addClass('tab_disable');
				}
				$(this).unbind("mouseover").bind("mouseover", function(){
					$(this).removeClass();
					$(this).addClass('tab_active');
					var target = 'body' + $(this).attr("type").substr(1);
					$(this).siblings().each(function(){
						$(this).removeClass();
						$(this).addClass('tab_disable');
					});
					$("div[class='tab_botList']", $(this).parent().parent()).each(function(i){
						if(!$(this).is(":animated")){
							if ($(this).attr('type') == target) {
								$(this).siblings(".tab_botList").hide();
								$(this).fadeIn("slow");
							}
						}
					});
				});
			});
		});
	}
});
$(document).ready(function(){
	$("div[type='angel-tab']").createTab();

 });
</script>

*看起来貌似很多的。全站只要一次就够了!放在最底下OK

演示程序在这里演示程序

下载程序在:点击这里下载