页面的head部分，需引入CSS样式文件和jQuery库，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery.min.js"></script>

页面的body部分，div容器里嵌套了多个div和li标签，代码如下：

<div class="xinxi_solution_main">
    <div class="xinxi_solution_bg">
        <div class="main_mobile">
            <ul>
                <li class="one on">
                    <div class="left"></div>
                    <div class="left_top">
                        <i>工业类</i><img src="images/button1.png" alt="工业">
                    </div>
                    <div class="right">
                        <dl>
                            <a title="食品加工行业解决方案" target="_blank" href="#">
                                   食品加工行业解决方案</a>
                            <a title="汽车零部件行业解决方案" target="_blank" href="#">
                                   汽车零部件行业解决方案</a>
                            <a title="家具生产行业解决方案  " target="_blank" href="#">
                                   家具生产行业解决方案   </a>
                            <a title="智能生产制造解决方案" target="_blank" href="#">
                                   智能生产制造解决方案</a>
                            <a title="食品加工行业解决方案" target="_blank" href="#">
                                   食品加工行业解决方案</a>
                        </dl>
                    </div>
                </li>
                <li class="one">
                    <div class="left"></div>
                    <div class="left_top">
                        <i>商贸类</i><img src="images/button1.png" alt="工业">
                    </div>
                    <div class="right">
                        <dl style="margin-top: -120px;">
                            <a title="手机通讯行业解决方案" target="_blank" href="#">
                                   手机通讯行业解决方案</a>
                            <a title="五金配件行业解决方案" target="_blank" href="#">
                                   五金配件行业解决方案</a>
                            <a title="家电卖场行业解决方案" target="_blank" href="#">
                                   家电卖场行业解决方案</a>
                        </dl>
                    </div>
                </li>
                <li class="one">
                    <div class="left"></div>
                    <div class="left_top">
                        <i>服务类</i><img src="images/button1.png" alt="工业">
                    </div>
                    <div class="right">
                        <dl>
                            <a title="餐饮行业解决方案" target="_blank" href="#">
                                   餐饮行业解决方案</a>
                            <a title="会员解决方案" target="_blank" href="#">
                                   会员解决方案</a>
                        </dl>
                    </div>
                </li>
                <li class="one">
                    <div class="left"></div>
                    <div class="left_top">
                        <i>售后服务</i><img src="images/button1.png" alt="工业">
                    </div>
                    <div class="right">
                        <dl>
                            <a title="软件服务支持" target="_blank" href="#">
                                  软件服务支持</a>
                        </dl>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

页面的底部，需设置好切换的特效和样式变化等的响应，代码如下：

<script type="text/javascript">
$(function() {
    $('.xinxi_solution_main ul li:eq(0)').addClass('on');
    $('.xinxi_solution_main ul li:eq(1)').addClass('b2');
    $('.xinxi_solution_main ul li:eq(2)').addClass('b3');
    $('.xinxi_solution_main ul li:eq(3)').addClass('b4');
    $('.xinxi_solution_main ul li:eq(4)').addClass('b5');
    $('.xinxi_solution_main ul li:eq(5)').addClass('b6');
    $('.xinxi_solution_main ul li:gt(3)').hide();
    //当三级分类大于7个的是，成两排显示
    $('.xinxi_solution_main ul li').each(function() {
        var len = $(this).find('.right dl a').length;
        if (len > 6) {
            $(this).find('.right dl a').addClass('yichu');
        }
    });

    //解决方案效果
    $('.xinxi_solution_main ul li').each(function() {
        var left_h = $(this).find('.left_top').height();
        $(this).find('.left_top').css({
            'top': '50%',
            'margin-top': -left_h / 2
        });

        var dl_h = $(this).find('.right dl').height();
        $(this).find('.right dl').css({
            'margin-top': -dl_h / 2
        });
    });
    $('.xinxi_solution_main ul li').click(function() {
        $(this).addClass('on').siblings().removeClass('on');
    });
    $('.xinxi_solution_main_mobile ul li:first-child').addClass('on');

    $('.xinxi_solution_main_mobile ul li').click(function() {
        $(this).addClass('on').siblings().removeClass('on');
    });

    $(".solu-category .solu-description").each(function() {
        var maxwidth = 60;
        if ($(this).text().length > maxwidth) {
            $(this).text($(this).text().substring(0, maxwidth));
            $(this).html($(this).html() + '...');
        }
    });

});
</script>