简化部分主要是栏目切换时,除子第一个默认栏目,其它的全改成ajax,不再生成静态页,而且通过PHP循环,简化了代码.另外加载更多按钮等也修改了触发形式.
效果图
一,模板
模板中涉及一个函数.get_url_by_typeid2() 在这里的说明,点击查看
[html]
<div class="container margin-top over-hidden">
<div class="xl12 xb12 over-hidden">
<!-- 切换标签 -->
<style type="text/css">
.slideTxtBox{ width:100%; text-align:left; }
.slideTxtBox .hd{ height:38px; line-height:27px; position:relative; overflow:hidden }
.slideTxtBox .hd ul{left:10px; float:left; position:absolute; top:3px; height:39px;over-flow:hidden;}
.slideTxtBox .hd ul li{height:40px; float:left;color:#fff;padding:0px 7px 0px 6px; cursor:pointer; }
.slideTxtBox .hd ul li a{color:#fff; }
.slideTxtBox .hd ul li.on
{background:url({dede:global.cfg_templets_skin/}/images/bg5.png) repeat-x; }
.slideTxtBox .hd ul li.on a{color:#555}
.slideTxtBox .bd ul{zoom:1;padding-bottom:50px;display:none;position:relative;min-height:100px}
.slideTxtBox .bd li{ height:24px; line-height:24px; }
</style>
<div id="slideTxtBox"class="slideTxtBox padding00"style="overflow:visible !important;">
<!-- 主导航 -->
<div class="hd bg-main pr">
<ul id="tab"class="border-top border-main border-big">
<li class="on"id=""><a href="javascript:"onclick="javascript:loadMoreApply(1,0);">全部</a></li>