jq菜单切换demo

下拉菜单切换：

 

<div>
		<ul>
			<li class="main">
			<a href="#">菜單1</a>
				<ul>
					<li>
						<a href="#">菜單1</a>
					</li>
					<li>
						<a href="#">菜單2</a>
					</li>
				</ul>
			</li>
			<li  class="main">
			<a href="#">菜單2</a>
				<ul>
					<li>
						<a href="#">菜單1</a>
					</li>
					<li>
						<a href="#">菜單2</a>
					</li>
				</ul>
			</li>
			<li  class="main">
			<a href="#">菜單3</a>
				<ul>
					<li>
						<a href="#">菜單1</a>
					</li>
					<li>
						<a href="#">菜單2</a>
					</li>
				</ul>
			</li>
		</ul>
	</div> 

 

$(document).ready(function() {
	$(".main>a").click(function(){
		var moule=$(this).next("ul");
		moule.toggle(500);
	});
});

 

.main ul{display: none;}
.main>a{ background: #333; color: #fff;}

水平菜单切换：

 

 

 

<ul id="hedbq" class="hedbq">
			<li class="bqtit">标签1</li>
			<li>标签2</li>
			<li>标签3</li>
		</ul>
		<div class="content bqcont">
			11111111
		</div>
		<div class="bqcont">
			22222222
		</div>
		<div class="bqcont">
			33333333
		</div>

 

$("#hedbq li").each(function(index) {
		var xuanze = $(this);
		$(this).mouseover(function(){
        
          	$("div.content").removeClass("content");
          	$("#hedbq li.bqtit").removeClass("bqtit");
          	$(".bqcont").eq(index).addClass("content");
          	xuanze.addClass("bqtit");
          }).mouseout(function(){
          	
		})
	})

 

.hedbq{ overflow: hidden;margin: 0; padding: 0;}
.hedbq li{ width: 60px; height: 30px; line-height: 30px; background:#333; color:#fff; float: left; margin-right: 7px; border: 1px solid #fff; list-style: none; text-align: center; }
.hedbq li.bqtit{ border: 1px solid #333;}
.bqcont{width:200px; background:#333;color:#fff; height:200px; display:none;overflow:hidden;}
.content{display:block; }