如何实现左侧导航，左侧导航控制右侧的内容或者文章列表

Question

我看到慕课网无论是问答和课程列表效果都超级棒，我想实现可想破脑袋都不知道怎么实现，我看到他的这段代码<li  class="course-category course-category-more curr">     <a  class="course-category-link" href="/course/list?c=fe" data-id="1">前端开发<i></i></a>    <div class="course-category-sort">     <div class="course-category-sort-bg"></div>     <ul>     <li><a data-id="7" href="/course/list?c=html">HTML/CSS</a></li>     <li><a data-id="44" href="/course/list?c=javascript">JavaScript</a></li>     <li><a data-id="1262" href="/course/list?c=CSS3">CSS3</a></li>     <li><a data-id="221" href="/course/list?c=html5">Html5</a></li>     <li><a data-id="219" href="/course/list?c=jquery">jQuery</a></li>     <li><a data-id="1123" href="/course/list?c=angularjs">AngularJS</a></li>     <li><a data-id="222" href="/course/list?c=nodejs">Node.js</a></li>     <li><a data-id="1263" href="/course/list?c=bootstrap">Bootstrap</a></li>     <li><a data-id="1260" href="/course/list?c= webapp">WebApp</a></li>     <li><a data-id="1261" href="/course/list?c=fetool">前端工具</a></li>     </ul>实在是愚笨 搞不懂 他具体是用JAVA还是jquery实现的。求助各位大神，请帮我详细的分析一下原理，最好是有现成的代码！！十分感激我不想用框架，最好全局都是DIV实现

Answer 1

我的理解，这东西就和tab选项卡一个原理啦！

第一步：左边定义个div，写上菜单列表，目前我接触到的用ul列表很多。

第二步：右边定义个div，包含内容变换的内容。

当点击不同的菜单项，系统就会从数据库中读取相应的内容然后返回数据在右边的div中显示！

我平时要是做静态页面的话，就准备好几个不同内容的div，然后点击菜单项的时候就把相应的div设置成display：block；其他的设置成display：none；这样~恩啦，经验有限，希望能帮到你吧！