0

我正在尝试禁用jquery 滑动选项卡的顶部菜单。我希望标签到标签只能与上一个/下一个一起操作。

请看我的现场演示。

查询：

<script>
$(document).ready(function() {
    // Horizontal Sliding Tabs demo
    $('div#st_horizontal').slideTabs({
        // Options              
        contentAnim: 'slideH',
        contentAnimTime: 600,
        contentEasing: 'easeInOutExpo',
        tabsAnimTime: 300
    });

    $(".st_tab_view").each(function(i) {
        var totalSize = $(".st_tab_view").size() - 1;
        if (i != totalSize) {
            next = i + 2;
            $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
        }
        if (i !== 0) {
            prev = i;
            $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
        }
    });

    $('.prev-tab').click(function() {
        $('.st_tab_active').parent().prev().children('a').trigger('click');
        return false;
    });

    $('.next-tab').click(function() {
        $('.st_tab_active').parent().next().children('a').trigger('click');
        return false;
    });


});​
</script>
4

2 回答 2

1

更改以下 CSS：

div.st_horizontal div.st_tabs_container { /* Tabs main container */        
    position:relative;
    /* This will hide it all together */
    display:none;
    z-index:100;    
    /* Or change with and heights */    
    width:0% !important;    
    height:0px;
    margin-bottom:-1px;    
    overflow:hidden;
}

或者，您可以在页面上添加更多 CSS（在添加 jQuery UI CSS 之后），以保存覆盖默认 CSS：

div.st_horizontal div.st_tabs_container {
    /* This will hide it all together */
    display:none;
    /* Or change with and heights */    
    width:0% !important;    
    height:0px;
}

否则，我建议您编写自己的控件。

这两个中的任何一个都可以节省潜入 jQuery 代码！

于 2012-06-25T18:19:02.487 回答
1

"

  • 水平选项卡 #1

    • 修改你的jQuery -

    $('.prev-tab').click(function() { $('.st_tab_active').attr('disabled','disabled'); var tab= $('.st_tab_active').parent(). prev().children('a'); tab.removeAttr('disabled'); tab.trigger('click'); // tab.attr('disabled','disabled'); return false; });

    $('.next-tab').click(function() {
    $('.st_tab_active').attr('disabled','disabled');
   var tab=  $('.st_tab_active').parent().next().children('a');
    tab.removeAttr('disabled');
    tab.trigger('click');
    //tab.attr('disabled','disabled');
    return false;
});

    "

    于 2012-06-25T18:35:20.680 回答