0

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

该代码可以在此链接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/

在此先感谢，斯威夫特。

4

2 回答 2

0

可能这个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');
});
});​
于 2012-08-25T10:26:10.313 回答
0

一律模组：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');
    });
});
于 2012-08-25T11:47:40.753 回答