a copy of iciba.com tab implement
Download the production version or the development version.
In your web page:
<script src="jquery.js"></script>
<script src="dist/i5ting-jquery-tab.min.js"></script>
<script>
jQuery(function($) {
$('.wrap').i5ting_jquery_tab();//tab
});
</script>
<div class="wrap">
<br/>
<div class='i5ting_tab_list'>
<ul>
<li class="current">
<a href="#">张婷作品</a>
</li>
<li>
<a href="#">jquery - tab</a>
</li>
<li>
<a href="#">大学</a>
</li>
<li>
<a href="#">童年</a>
</li>
<li class="last">
<a href="#">在人间</a>
</li>
</ul>
</div>
<div class="i5ting_tab_content">
<div class="i5ting_tab_content_item current_content">
1.This is the news part. We will give you the latest news around the world on pretty hearts and the beautiful scenry.
</div>
<div class="i5ting_tab_content_item">
2.<p>The skill part.</p>
<p>The skill part.</p>
</div>
<div class="i5ting_tab_content_item">
3.We have a large number of art works. We are so famous and popular that many people come here to watch our show from far distance.
</div>
<div class="i5ting_tab_content_item">
4.A great team is very important to create a brilliant career. We are not alone ,we are a team, we can share all the dificulies.
</div>
<div class="i5ting_tab_content_item">
5.If you have any question about us or our works please leave a message, we will repond at once.
</div>
</div>
</div>(Coming soon)
固定高度显示
$('.wrap1').i5ting_jquery_tab({
fix_height :'200px'
});隐藏tab正文区域的按钮
$('.wrap2').i5ting_jquery_tab({
is_tab_content_btn_show:false
});使用hover事件触发
$('.wrap2').i5ting_jquery_tab({
is_tab_content_btn_show:false,
current_tab_index: 2,
event_trigger_type:'hover'
});- 是否固定显示高度
fix_height :'200px'
如果配置了fix_height属性，则tab将以此高度，固定显示高度。
默认是自动适应高度的。
- 是否显示tab正文区域是否隐藏按钮
is_tab_content_btn_show :fase
如果配置了is_tab_content_btn_show=false属性，则tab不显示隐藏tab正文区域的按钮。
默认：is_tab_content_btn_show=true
- 增加event_trigger_type
/*现在支持2种类型： click | hover */
- 设置current_tab_index（说明:此设置是把tab_content设置为对应选中，不修改li的原因是，不预制li class=current会导致进入刷新，会闪屏幕的）
<div class='i5ting_tab_list'>
<ul>
<li >
<a href="#">tab说明</a>
</li>
<li>
<a href="#">特性</a>
</li>
<li class="current">
<a href="#">开源协议</a>
</li>
<li>
<a href="#">源码</a>
</li>
<li>
<a href="#">张婷作品</a>
</li>
</ul>
</div>see example dir.
@see index.html
v0.1
- 是否固定显示高度
- 是否显示tab正文区域是否隐藏按钮
- 给最后一个li增加last这个css样式
- 增加event_trigger_type:'click', /*现在支持2种类型： click | hover */
- 设置current_tab_index（说明:此设置是把tab_content设置为对应选中，不修改li的原因是，不预制li class=current会导致进入刷新，会闪屏幕的）
<div class='i5ting_tab_list'>
<ul>
<li >
<a href="#">tab说明</a>
</li>
<li>
<a href="#">特性</a>
</li>
<li class="current">
<a href="#">开源协议</a>
</li>
<li>
<a href="#">源码</a>
</li>
<li>
<a href="#">张婷作品</a>
</li>
</ul>
</div>v0.2 -增加li的背景扩展demo