JQ导航栏栏切换

效果图：

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>&#xe68b;</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>