Tab切换的构想。

<script type="text/javascript">

$.fn.extend({

$.extend({
    /*
     * 选项卡 wangweimin
     * $.tabCont(btn,cont,cls,evt,fn)
     * @btn jq要抓取的按钮dom
     * @cont jq要抓取的内容dom
     * @cls 按钮选中的class
     * @evt 事件
     * @fn 切换后执行的function扩展，可为空
     * */
tabCont:function(btn,cont,cls,evt,fn){
    $(btn).each(function(i){
        $(this).bind(evt,function(){
            $(this).addClass(cls).siblings().removeClass(cls);
            $(cont).eq(i).show().siblings(cont).hide();
            fn && fn(i,this);
            return false;
        });
    });
}
$.tabCont('.ui-tab-trigger-item','.ui-tab-cnt-item','ui-tab-trigger-item-current','click')
$(".ui-tab-cnt-item:gt(0)").hide();
</script>

<div class="ui-tab">

    <div class="ui-tab-trigger">
        <ul>
            <li class="ui-tab-trigger-item"><a href="#">标题一</a></li>
            <li class="ui-tab-trigger-item ui-tab-trigger-item-current"><a href="#">当前选中项</a></li>
            <li class="ui-tab-trigger-item"><a href="#">其他项</a></li>
        </ul>
    </div>

    <div class="ui-tab-cnt">
        <div class="ui-tab-cnt-item ui-tab-cnt-item-current">
            基础 ui-tab1
        </div>
        <div class="ui-tab-cnt-item">
            基础 ui-tab2
        </div>
        <div class="ui-tab-cnt-item">
            基础 ui-tab3
        </div>
    </div>
    
</div> <!-- .ui-tab -->