织梦 channelartlist列表自动序号和JS切换 博客分类： 境-DEDE 织梦JS切换精简模板

织梦模板

<div class="bzbox">
    <div class="t">{dede:type typeid='8'}<span><a href="[field:typeurl/]" target="_blank">更多</a></span><a href="[field:typeurl/]" target="_blank">[field:typename/]</a>{/dede:type}</div>
    <div class="c">
        <ul class="menubox">
            {dede:channelartlist typeid='113,14,116,115,135,102'}
            <li id="bzone{dede:global name='itemindex'/}" onmouseover="setTab('bzone',{dede:global name='itemindex'/},{dede:global name='itemtotal'/})" class="{dede:global name=itemindex runphp='yes'}if(@me==1)@me='hover';else @me='';{/dede:global}"><a href="{dede:field name='typeurl'/}" target="_blank">{dede:field name='typename'/}</a></li>
            {/dede:channelartlist}
        </ul>
        <div class="contentbox">
            {dede:channelartlist typeid='113,14,116,115,135,102'}
            <div id="con_bzone_{dede:global name='itemindex'/}" style="display:{dede:global name=itemindex runphp='yes'}if(@me==1)@me='block';else @me='none';{/dede:global}"  class="{dede:global name=itemindex runphp='yes'}if(@me==1)@me='hover';else @me='';{/dede:global}">
                <div class="c1">
                    <div class="c11">
                    {dede:arclist row='2' orderby='pubdate' flag = 'h'}
                        <a href="[field:arcurl /]" title="[field:title /]" target="_blank"><img src="[field:litpic/]" alt="[field:title /]"/></a>
                    {/dede:arclist}
                    </div>
                    <div class="c12">
                        <div class="c121">
                            {dede:arclist orderby='pubdate' flag='h' row='1' titlelen='36' infolen='180'}
                            <h1><a href="[field:arcurl /]" target="_blank">[field:title /]</a></h1>
                            <div class="p">[field:info/]...<a href="[field:arcurl /]" target="_blank">[详情]</a></div>
                            {/dede:arclist}
                        </div>
                        <ul class="c122">
                            {dede:arclist orderby='pubdate' noflag='h' row='8' titlelen='30'}
                            <li><a href="[field:arcurl/]" target="_blank">[field:title/]</a></li>
                            {/dede:arclist}
                        </ul>
                    </div>
                </div>
                <dl class="c2">
                    <dt>热门文章</dt>
                    {dede:arclist orderby='click' limit='0,7' titlelen='40'}
                    <dd><a href="[field:arcurl/]" target="_blank">[field:title/]</a></dd>
                    {/dede:arclist}
                </dl>
                <div class="clear"></div>
                <div class="c3"> <strong>热门关键词：</strong>
                    {dede:global name=itemindex runphp='yes'}
                        if(@me==1)@me="<a href='###' target='_blank'>热门关键词</a>";
                        else if(@me==2) @me="<a href='###' target='_blank'>热门关键词</a>";
                        else if(@me==3) @me="<a href='###' target='_blank'>热门关键词</a>";
                        else if(@me==4) @me="<a href='###' target='_blank'>热门关键词</a>";
                        else if(@me==5) @me="<a href='###' target='_blank'>热门关键词</a>";
                        else @me="<a href='###' target='_blank'>热门关键词</a>";
                    {/dede:global}
                </div>
            </div>
            {/dede:channelartlist}
        </div>
    </div>
</div>

 

JS

function setTab(name,cursel,n){ 
	for(i=1;i<=n;i++){ 
	var menu=document.getElementById(name+i); 
	var con=document.getElementById("con_"+name+"_"+i); 
	menu.className=i==cursel?"hover":""; 
	con.style.display=i==cursel?"block":"none"; 
	} 
} 

 

效果图：