Question

我一直试图在Google上找到我的问题的答案几天没有任何运气，所以我希望有人在这里可以提供帮助。

可以在此链接http://www.scriptbreaker.com/javascript/script/JQuery-vertical-tab-menu找到代码，它只是一个垂直标签菜单，我已经在点击时将其更改为不悬停。

我想要的是在点击内容时向上滑动的内容以及新内容向下滑动（取决于单击哪个标签，如果它有意义，它是否上升或下降）。

这是jQuery：

<script language="JavaScript">
        $(document).ready(function() {
            $(".tabs .tab[id^=tab_menu]").click(function() {
                var curMenu=$(this);
                $(".tabs .tab[id^=tab_menu]").removeClass("selected")
                curMenu.addClass("selected")

                var index=curMenu.attr("id").split("tab_menu_")[1];
                $(".curvedContainer .tabcontent").css("display","none")
                $(".curvedContainer #tab_content_"+index).css("display","block")
            });
        });
    </script>

更新这是小提琴http://jsfiddle.net/swift29/4pVtB/

先谢谢，Swift。

Answer 1

可能这个FIDDLE就足够了。您只需调用.slideup/slideDown方法，而不是简单地使用display:block/none

$(document).ready(function() {
$(".tabs .tab[id^=tab_menu]").click(function() {
    var curMenu=$(this);
    $(".tabs .tab[id^=tab_menu]").removeClass("selected");
    curMenu.addClass("selected");

    var index=curMenu.attr("id").split("tab_menu_")[1];
    $(".curvedContainer .tabcontent").slideUp('fast');
    $(".curvedContainer #tab_content_"+index).slideDown('fast');
});
});

Answer 2

one lil mod：http://jsfiddle.net/4pVtB/7/

$(document).ready(function() {
    $(".tabs .tab[id^=tab_menu]").click(function() {
        var curMenu = $(this);
        var cur_index=curMenu.attr("id").split("tab_menu_")[1];
        var old_index=$(".tabs .selected").attr("id").split("tab_menu_")[1];
        if (cur_index==old_index) {
            return;
        }
        $(".tabs .tab[id^=tab_menu]").removeClass("selected");
        curMenu.addClass("selected");
        $("#tab_content_"+old_index).slideUp('slow');
        $("#tab_content_"+cur_index).slideDown('slow');
    });
});

如何为slideClass jQuery添加幻灯片效果

2 个答案: