后台的代码就不给了，我也是网上copy的，主要说使用div实现点击左侧链接，右侧联动的方式。

<ul id="systemSetting" class="nav nav-list collapse secondmenu" style="height: 0;">
    <li class="person-center active"><a href="javascript:void(0);"><i class="glyphicon glyphicon-user"></i>个人中心</a>
    </li>
    <li class="exam-list"><a href="javascript:void(0);"><i class="glyphicon glyphicon-th-list"></i>考试列表</a>
    </li>
    <li class="result-view"><a href="javascript:void(0);"><i class="glyphicon glyphicon-asterisk"></i>成绩查看</a>
    </li>
</ul>

这是右侧导航栏代码，首先将a标签的默认事件清除。

$(function () {  
        $(".person-center").click(function () {  
            $("#loads").load("{% url 'students:info' %}");  
        })  
        $(".exam-list").click(function () {  
            $("#loads").load("{% url 'students:testpaper' %}");

        })  
        $(".result-view").click(function () {  

        })  
    })  

使用jquery的load事件加载链接。大功告成！