<img src="http://files.jb51.net/upload/20090902201401107.gif" border="0" alt="jquery 네비게이션 디자인 구현 코드입니다. jquery를 배우는 친구들은 Look_navigation 메뉴를 이용해보세요." ><br><div class="htmlarea"> <textarea id="runcode41053"> <style type="text/css"> #menu{width:200px;} .has{background:#00DFAA; color:#FFFBF0; cursor:pointer} .hig{background:#FF5F55; color:#2A3F55;} div{padding:0px; margin:10px 0;} div a{background:#D41FAA; display:none; float:left; width:200px;} </style> <div id="menu"> <div class="has"> <span> </span> <a>1장</a> <a>1.1 ㅋㅋㅋㅋㅋㅋ</a> <a>1.2 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ</a> <a>1.3 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ</a> </div>1.4 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ<div class="has"> <span> </span> <a>제2장</a> <a>2.1 ㅋㅋㅋㅋㅋㅋ</a> <a>2.2 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ</a> <a>2.3 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ</a> </div>2.4 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ<div class="has"> <span> </span> <a>제3장</a> <a>3.1 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ</a> <a>3.2 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ</a> <a>3.3 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ</a> </div>3.4 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ</div> </textarea> <br> <input onclick="runEx('runcode41053')" type="button" value="运行代码"><input onclick="doCopy('runcode41053')" type="button" value="复制代码"><input onclick="doSave(runcode41053)" type="button" value="保存代码"> <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank"> </a>[Ctrl A 모두 선택 참고: </div>외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 <script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script>]<script type="text/javascript"> $(document).ready(function(){ $(".has").click(function(){ $(this).addClass("hig").children("a").show().end().siblings().removeClass("hig").children("a").hide(); }); }); </script>