Tabs - 标签页

<div  class="J_TWidget tab" data-widget-type="Tabs"style="width:宽度px; height:高度px; overflow:hidden;" data-widget-config="{'effect': 'fade','autoplay': true, 'circular': true ,'activeTriggerCls':'selected'}">
<ul class="ks-switchable-nav" style="width:750px; height:40px; overflow:hidden;">
<li class="ks-active" style="list-style:none; float:left; width:140px; height:40px;line-height:40px;text-align:center;margin-right:2px; cursor:pointer;">标题 A</li>
<li style="list-style:none; float:left; width:140px; height:40px;line-height:40px;text-align:center;margin-right:3px; cursor:pointer;">标题 B</li>
<li style="list-style:none; float:left; width:140px; height:40px;line-height:40px;text-align:center;margin-right:2px; cursor:pointer;">标题 C</li>
<li style="list-style:none; float:left; width:140px; height:40px;line-height:40px;text-align:center;margin-right:3px; cursor:pointer;">标题 D</li>
<li style="list-style:none; float:left; width:140px; height:40px;line-height:40px;text-align:center;cursor:pointer;">标题 E</li>
</ul>
<div class="ks-switchable-content" style="position:relative; width:710px; height:450px;overflow:hidden;">
<div><img src="https://img.alicdn.com/imgextra/i1/799193263/TB2xNhIpVXXXXabXpXXXXXXXXXX_!!799193263.jpg" alt=""></div>
<div style="display: none"><img src="https://img.alicdn.com/imgextra/i3/799193263/TB21eDfppXXXXXQXpXXXXXXXXXX_!!799193263.jpg" alt=""></div>
<div style="display: none"><img src="https://img.alicdn.com/imgextra/i3/799193263/TB2W312ppXXXXaBXXXXXXXXXXXX_!!799193263.jpg" alt=""></div>
<div style="display: none"><img src="https://img.alicdn.com/imgextra/i2/799193263/TB2So1boFXXXXX9XFXXXXXXXXXX_!!799193263.jpg" alt=""></div>
<div style="display: none"><img src="https://img.alicdn.com/imgextra/i3/799193263/TB2JW4tnFXXXXX4XpXXXXXXXXXX_!!799193263.jpg" alt=""></div>
</div>
</div>
上一篇:PHP基础知识之流程控制的替代语法


下一篇:poj3507---去掉最小值和最大值