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

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；这样~恩啦，经验有限，希望能帮到你吧！