드롭다운 탭

1541 단어 tab

.has_children{
background:#555;
color:#FF0000;
cursor:pointer;

}
div{
padding:0;
margin:0px 0;
}
div a{
background:#888;
display:none;
float:left;
width:300px;
}
.highlight{
color:#FF00FF;
background:#cccccc;
}

$(".has_children").click(function(){
			$(this).addClass("highlight")
				.children("a").show().end()
				.siblings().removeClass("highlight")
				.children("a").hide();
		})

<div id="menu">
		<div id="content" class="has_children">
			 <span>   </span>
			 <a>  11</a>
			 <a>  12</a>
			 <a>  13</a>
			 <a>  14</a>
			 <a>  15</a>
		</div>
		<div id="content" class="has_children">
			 <span> 2 </span>
			 <a>  21</a>
			 <a>  22</a>
			 <a>  23</a>
			 <a>  24</a>
			 <a>  25</a>
		</div>
		<div id="content" class="has_children">
			 <span> 3 </span>
			 <a>  31</a>
			 <a>  32</a>
			 <a>  33</a>
			 <a>  34</a>
			 <a>  35</a>
		</div>
	</div>

좋은 웹페이지 즐겨찾기