Tabstrip.CSS示范脚本

admin

DIV：
$func_tabstrip(disp=2,tabs=3,para=News,summ=3,pics=6,len=28,rows=12,more=morewhiteplus.gif)$
CSS：
#ArticleList .app .thumbs{ float:left; display:block; margin-right:10px;}
#ArticleList .app .thumbs img{ width:198px; height:155px;}
#ArticleList .app .detail{ height:158px; overflow:hidden;}
#ArticleList .app .detail .title a{ font-size:14px; font-weight:bold;}
JS：
<script type="text/javascript">
jQuery(".news #Box0 ul").before("<li class=\"app\"><div class=\"num\"></div><div class=\"content\"></div></li>");
var len=jQuery(".news #Box0 .Summary").length;
for(var i=0;i<len;i++){jQuery(".news #Box0 .app .num").append("<span>"+(i+1)+"</span>");}
jQuery(".news #Box0 .Summary").css("display","none");
jQuery(".news #Box0 .app .content").html(jQuery(".news #Box0 .Summary:eq(0)").html());
jQuery(".news #Box0 .app").css("position","relative");
jQuery(".news #Box0 .app .num").css({"position":"absolute","z-index":"0","bottom":"10px","left":"69px"})
jQuery(".news #Box0 .app .num span").css({"display":"inline-block","background":"#c00","color":"#fff","margin":"2px","line-height":"14px","padding":"0 5px","cursor":"pointer"});
jQuery(".news .num span").click(function(){
var cur=jQuery(this).html();
jQuery(".news #Box0 .content").hide();
jQuery(".news #Box0 .Summary").css("display","none");
jQuery(".news #Box0 .content").html(jQuery(".news #Box0 .Summary:eq("+(cur-1)+")").html());
jQuery(".news #Box0 .content").show();
})
</script>
参考案例whjsrcb图样



改动版本（去除数字，当前背景为桔色，按先后顺序依次轮换）：
JS：
jQuery(".news #Box0 ul").before("<li class=\"app\"><div class=\"num\"></div><div class=\"content\"></div></li>");
var len=jQuery(".news #Box0 .Summary").length;
for(var i=0;i<len;i++){jQuery(".news #Box0 .app .num").append("<span> </span>");}
jQuery(".news #Box0 .Summary").css("display","none");
jQuery(".news #Box0 .app .content").html(jQuery(".news #Box0 .Summary:eq(0)").html());
jQuery(".news #Box0 .app").css("position","relative");
jQuery(".news #Box0 .app .num").css({"position":"absolute","z-index":"0","bottom":"2px","left":"86px"})
jQuery(".news #Box0 .app .num span").css({"display":"inline-block","background":"#c00","color":"#fff","margin":"2px","width":"14px","height":"14px","cursor":"pointer"});
jQuery(".news #Box0 .app .num span:eq(0)").css("background","#f60")
var cur=0;
function trig(){if(cur==6)cur=0;jQuery(".news .num span:eq("+cur+")").trigger("click");cur=cur+1;}
setInterval("trig()",5000);
jQuery(".news .num span").click(function(){
cur=jQuery(this).index();
jQuery(".news .num span").css("background","#c00");
jQuery(this).css("background","#f60");
jQuery(".news #Box0 .content").hide();
jQuery(".news #Box0 .Summary").css("display","none");
jQuery(".news #Box0 .content").html(jQuery(".news #Box0 .Summary:eq("+(cur)+")").html());
jQuery(".news #Box0 .content").show();
})

admin

DIV:
<div class="">$func_tabstrip(para=Knowledge,disp=1,len=25,rows=4,list=4,date=101)$</div>

CSS:
@import "font-awesome.min.css";
#TabStrip{display: flex; flex-direction: row; justify-content: space-between;}
#TabStrip dl{ flex-grow: 1; margin-right: 50px;}
#TabStrip dl:last-of-type{ margin-right: 0;}
#TabStrip dl dt{ padding-bottom: 10px; border-bottom: 1px dotted #C7BAB7; margin-bottom: 20px;}
#TabStrip dl dt i{ margin-right: 10px; font-size: 24px;}
#TabStrip dl dt a{ font-size: 20px; font-weight: bold;}
@media (max-width: 768px) {
    #TabStrip{ flex-direction: column;}
}
#ArticleIntro ul li{ text-align:left; margin-bottom:30px;}
#ArticleIntro ul li .thumbs{ width:120px; height:120px;}
#ArticleIntro ul li .thumbs img{ max-width:120px; max-height:120px;}
#ArticleIntro ul li .detail .title a{ display:block; font-size:16px; font-weight:bold; line-height:1.2em;}
#ArticleIntro ul li .detail .intro{ margin-top:10px; line-height:1.5em; height: 40px; overflow: hidden; color:#888;}
.LongDatePlus{ float:left; padding:8px; border:1px solid #eee; margin-right:20px; background:#f4f4f4; text-align:center; margin-bottom:20px;}
.LongDatePlus .dd{ display:block; font-size:24px; font-weight:bold; line-height:28px;}

JS:
if($("#TabStrip dt").length>0){$("#TabStrip dt").prepend("<i class='fa fa-chrome'></i>")}

模板：zgghczy，案例：gzghczy

admin

模板：ylfs，必须启用hondy框架（包括hondy.css与hondy.js）
DIV：
<div class="product py-lg-5">$func_tabstrip(disp=10,tabs=8,para=Product,len=10,rows=6)$</div>
CSS：
.RowsTitle{text-align: center;margin-bottom: 20px}
.RowsTitle .Title .cn{display:inline-block; background:#fff;font-size:2rem;padding:0 1em;}
.RowsTitle .Title .en{font-size:1.4rem; line-height:100%;text-transform:uppercase}
.TabNavTitle{display:none;}
.TabTitle a{display:block;line-height:3.5em;padding-left:5em;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAGCAYAAADkOT91AAAAJUlEQVQYV2OcdeLFfwYGBoY0CwlGEM2IIQASBQGYBFgZigBBMwC7yhaZg1CicAAAAABJRU5ErkJggg==) no-repeat 30px center}
.TabTitle:first-child a{font-size:large;background:none}
.TabTitle:first-child a:hover{color:#fff!important}
@media (min-width: 992px) {
.TabNavTitle{display:block;border:3px solid #0074C5;background:#fff}
.TabNavTitle .RowsTitle{background:#0074C5;padding-top:15px;padding-bottom:18px;margin-bottom:8px}
.TabNavTitle .RowsTitle .Title .cn{background:none;color:#fff}
.TabNavTitle .RowsTitle .Title .en{color:#fff}
.TabTitle{border-bottom: 1px dotted #ccc;}
#TabStrip .TabContent ul li{width:calc(33% - 20px)}
}