dedecms5.7sp1自动调用多栏目内容,TAB选项卡含jquery插件。

dedecms5.7sp1自动调用多栏目内容,TAB选项卡含jquery插件。

智能完美的TAB:

CSS JS 部分：

<style type="text/css"> 
#tabbox{ width:600px; overflow:hidden; margin:0 auto;}
.tab_conbox{border: 1px solid #999;border-top: none;}
.tab_con{ display:none;}
.tabs{height: 32px;border-bottom:1px solid #999;border-left: 1px solid #999;width: 100%;}
.tabs li{height:31px;line-height:31px;float:left;border:1px solid #999;border-left:none;margin-bottom: -1px;background: #e0e0e0;overflow: hidden;position: relative;}
.tabs li a {display: block;padding: 0 20px;border: 1px solid #fff;outline: none;}
.tabs li a:hover {background: #ccc;}
.tabs .thistab,.tabs .thistab a:hover{background: #fff;border-bottom: 1px solid #fff;}
.tab_con {padding:12px;font-size: 14px; line-height:175%;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

jQuery.jqtab = function(tabtit,tab_conbox,shijian) {

  $(tab_conbox).find("li").hide();

  $(tabtit).find("li:first").addClass("thistab").show();

  $(tab_conbox).find("li:first").show();

   $(tabtit).find("li").bind(shijian,function(){

    $(this).addClass("thistab").siblings("li").removeClass("thistab");

   var activeindex = $(tabtit).find("li").index(this);

   $(tab_conbox).children().eq(activeindex).show().siblings().hide();

   return false;

  });

  };

/*调用方法如下：*/

$.jqtab("#tabs","#tab_conbox","click");

  $.jqtab("#tabs2","#tab_conbox2","mouseenter");

});

</script>

代码部分：

<div id="tabbox">
    <ul class="tabs" id="tabs2">
      {dede:channel type='top' row='5' }
       <li><a href='[field:typelink/]'>[field:typename/]</a></li>
    {/dede:channel}
    </ul>
   <ul class="tab_conbox" id="tab_conbox2">
{dede:channelartlist row=5}
<li class="tab_con">
{dede:arclist titlelen='42' row='10'}
<a href="[field:arcurl /]">[field:title /]</a><span>([field:pubdate function="MyDate('m-d',@me)"/])</span>
{/dede:arclist}
</li>
{/dede:channelartlist}
</ul>
</div>

效果见：http://lso.cool/