当点击右边菜单时，怎样使右边显示对应的列表信息？


上面页面采用的bootstrap和jQuery，现在要实现点击左边菜单时，右边展示对应的列表信息，以下是页面中的一段包含了左边菜单和右边表格的代码<li><a href="#"  class="active"><i
class="fa fa-edit fa-fw"></i> PAFC通道信息</a></li>
<li><a href="#"><i
class="fa fa-dashboard fa-fw"></i> PAFC考勤服务器</a></li>
<li><a href="#" class="active""><i
class="fa fa-edit fa-fw"></i> 八卦岭通道信息</a></li>
<li><a href="#"><i
class="fa fa-dashboard fa-fw"></i> 八卦岭考勤服务器</a></li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side --> </nav> <div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h3 class="page-header">PAFC通道信息管理</h3>
</div>
<!-- /.col-lg-12 -->
</div>

<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">PDFC通道信息列表
<div style="float:right;" class="form-group">
<a href="#" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#PafcChannelAddDialog">添加</a>
</div>
</div>


<!-- /.panel-heading -->
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>组编号</th>
<th>通道</th>
<th>通道号</th>
<th>方向</th>
<th>设备</th>
<th>IP</th>
<th>位置</th>
<th>软件版本</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${rows}" var="row">
<tr>
<td>${row.id}</td>
<td>${row.groupNumber}</td>
<td>${row.channel}</td>
<td>${row.channelNumber}</td>
<td>${row.direction}</td>
<td>${row.equipment}</td>
<td>${row.ip}</td>
<td>${row.location}</td>
<td>${row.softVersion}</td>
<td>
<a href="#" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#PafcChannelEditDialog" onclick="editPafcChannelInfo(${row.id})">修改</a>
<a href="#" class="btn btn-danger btn-xs" onclick="deletePafcChannelInfo(${row.id})">删除</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>