jquery-导航设计

 

<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>

<script type="text/javascript">

       $(document).ready(function(){

              $(".has").click(function(){

                     $(this).addClass("hig").children("a").show().end().siblings().removeClass("hig").children("a").hide();

              });

       });

<div id="menu">

       <div class="has">

              <span>第一章</span>

              <a>1.1哈哈哈哈哈哈</a>

              <a>1.2哈哈哈哈哈哈</a>

              <a>1.3哈哈哈哈哈哈</a>

              <a>1.4哈哈哈哈哈哈</a>

       </div>

       <div class="has">

              <span>第二章</span>

              <a>2.1哈哈哈哈哈哈</a>

              <a>2.2哈哈哈哈哈哈</a>

              <a>2.3哈哈哈哈哈哈</a>

              <a>2.4哈哈哈哈哈哈</a>

       </div>

       <div class="has">

              <span>第三章</span>

              <a>3.1哈哈哈哈哈哈</a>

              <a>3.2哈哈哈哈哈哈</a>

              <a>3.3哈哈哈哈哈哈</a>

              <a>3.4哈哈哈哈哈哈</a>

       </div>

</div>