效果图：
a1.png
a2.png
html：
<div class="com-container">
<div class="cms-g">
<!-- 左侧栏目 -->
<div class="am-hide-sm-only am-u-md-3 am-u-lg-3">
<div class="com-nav-left">
<h1><em>新闻中心</em><i>NEWS</i></h1>
<ul>
{foreach name="zlist" item="xo"}
<li><a href="#">{$xo.cat_name}</a></li>
{/foreach}
</ul>
</div>
</div>
<div class="am-u-sm-12 am-u-md-9 am-u-lg-9">
{foreach name="zlist" item="xo"}
<div class="yourshow">
<div class="com-nav-title">
<a href="#doc-oc-demo1" class="font am-show-sm-only" data-am-offcanvas></a>
<span>{$xo.cat_name}</span>
</div>
<div class="new-list">
<ul>
{foreach name="xo.datalist" item="yo"}
<li><a href="{:url('index/new_info',['id'=>$pid])}"><span>{$yo.title}</span><em>2017-4-11</em></a></li>
{/foreach}
</ul>
</div>
</div>
{/foreach}
</div>
</div>
</div>
jq：
<script>
$(document).ready(function(){
$(".yourshow").hide(); //隐藏所有
$('.yourshow:first').show(); //默认显示第一项
});
$(".com-nav-left ul li").click(function () {
var index = $(this).index(); //获取当前操作下标
$('.yourshow').eq(index).show(); //显示当前
$('.yourshow').eq(index).siblings().hide(); //其他隐藏
});
</script>
