The jquery navigation design mainly controls some css style transformations through jquery.
<Style type = "text/css"> # menu {width: 200px ;}. has {background: #00 DFAA; color: # FFFBF0; cursor: pointer }. hig {background: # FF5F55; color: #2A3F55;} p {padding: 0px; margin: 10px 0;} p a {background: # D41FAA; display: none; float: left; width: 200px ;}</style> <script type = "text/javascript" src = "http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js? 1.1.15 "> script <script type =" text/javascript ">$ (document ). ready (function () {$ (". has "). click (function () {$ (this ). addClass ("hig "). children (""). show (). end (). siblings (). removeClass ("hig "). children (""). hide ();});}); script <p id = "menu"> <p class = "has"> Chapter 1 1.1 hahahahahahahaha 1.2 hahahahahahaha 1.3 Hahahahahahahahahahaha </p> <p class = "has"> Chapter 2 2.1 Haha 2.2 Haha 2.3 Haha 2.4 Haha 3.1 Haha </p> <p class = "has"> Chapter 3 3.2 Haha 3.3 Haha haha 3.4 Haha </p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]