Siteserver-stl:tabs页签切换

导航: 上一页

stl:tabs 页签切换

• 以页签（Tab）的方式切换显示内容区域。

属性列表

• 下表显示所有属于此元素的属性列表

属性	可能的取值	默认值	简介
tabName			页签名称
isHeader			是否为页签头部
	true	√	页签头部
	false		页签显示或隐藏主体
action			页签切换方式（isHeader为“true”时起作用）
	Click		点击
	MouseOver	√	鼠标移动
<nobr>classActive</nobr>			当前显示页签头部的CSS类（isHeader为“true”时起作用）
classNormal			当前隐藏页签头部的CSS类（isHeader为“true”时起作用）
current	数字	1	当前显示页签的顺序次数，1代表显示第一个页签，2代表显示第二个页签，以此类推。（isHeader为“true”时起作用）
isDynamic			是否动态显示
	true		动态显示
	false	√	静态显示

注意

• <stl:tabs>元素用于以页签的方式切换显示内容区域，必须同时定义两个<stl:tabs>元素，一个代表页签头部，一个代表页签内容（isHeader属性分别为“true”及“false”）；同时两个<stl:tabs>元素的页签名称（tabName ）属性必须设置为同一个字符串。
• action 属性用于控制页签切换的方式，可以点击页签头部切换（Click），也可以鼠标移动到页签头部切换（MouseOver）。
• classActive 及 classNormal 属性用于切换页签时更改头部区域的CSS类，classActive指定页签显示时头部的显示样式，classNormal指定页签隐藏是头部的显示样式。
• current 属性用于设置当前显示的页签，默认为显示第一个页签。

stl:tabs 示例

• 示例一：切换显示内容区域.下面的例子有页签的方式切换显示“公司新闻”与“行业新闻”区域。

<ul>  
<stl:tabs tabName="页签一" isHeader="true" action="MouseOver"    
    classActive="tabon" classNormal="taboff">  
    <li class="tabon"><stl:a channelIndex="公司新闻">公司新闻</stl:a></li>  
    <li class="taboff"><stl:a channelIndex="行业新闻">行业新闻</stl:a></li>  
</stl:tabs>  
</ul>  
<stl:tabs tabName="页签一" isHeader="false">  
<div><ul>  
    <stl:contents channelIndex="公司新闻" totalNum="10" layout="None">  
        <stl:content type="Title" wordNum="15"></stl:content>  
    </stl:contents>  
</ul></div>  
<div style="display:none"><ul>  
    <stl:contents channelIndex="行业新闻" totalNum="10" layout="None">  
        <stl:content type="Title" wordNum="15"></stl:content>  
    </stl:contents>  
</ul></div>  
</stl:tabs> 

参考资料

• SiteServer官方