0

私は何日も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。

4

2 に答える 2

0

このフィドルで十分かもしれません。.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

1 つのリル 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');
    });
});
于 2012-08-25T11:47:40.753 に答える