jquery - 押されたタブに応じてJqueryの異なるカスタム「右クリック」メニュー

Question

「demo-container」と呼ばれるdivの上に、右クリックで表示されるカスタム右クリックメニューを作成しました。すべてが機能しますが、もっと複雑なものが必要です。正確には、別のタブを押すたびにデモコンテナの上に表示される別のカスタムメニューが必要です。したがって、デフォルトの動作とタブ「ステップ1」を押すと、「demo-container」の上にクラス「custom-menu1」のメニューが表示され、タブ「ステップ2」を押すと、クラス「custom-menu2」のメニューが表示されます「demo-container」の上で、タブ「Step 3」を押すと、「demo-container」の上にクラス「custom-menu3」のメニューが表示されます....

.click で何かを試しましたが、失敗しました。

私のjsfiddleのカスタム右クリックメニューで例を見て編集することができます: http://jsfiddle.net/dzorz/dfCkR/

html:

    <div id="tabs" class="pull-right">    
    <ul class="nav nav-tabs">
        <li class="active"><a href="#add-step1" data-toggle="tab">Step 1</a></li>
        <li><a href="#add-step2" data-toggle="tab">Step 2</a></li>
        <li><a href="#add-step3" data-toggle="tab">Step 3</a></li>
        <li><a href="#add-step4" data-toggle="tab">Step 4</a></li>
    </ul>
    <ul class="tab-content">
        <li class="tab-pane fade in active" id="add-step1">
            First
        </li>
        <li class="tab-pane fade in" id="add-step2">
             Second
        </li>
        <li class="tab-pane fade in" id="add-step3">
            Third
        </li>
        <li class="tab-pane fade in" id="add-step4">
            Fourth
        </li>
     </ul>
</div>


<div id="demo-container" class="demo-container pull-left">
Duis sed accumsan mi. Integer dapibus viverra sapien, vel tempor libero     
ornare vel. Maecenas sit amet urna pretium, hendrerit arcu non, 
fermentum erat. Aliquam leo massa, varius vel hendrerit a, tempus eget 
lacus. Aliquam non dui orci.
</div>

<div class='custom-menu dropdown-menu'>
<button id="copy_1" class="btn btn-primary">Title 1</button>
<button id="copy_2" class="btn btn-primary">Title 2</button>
<br>
<button id="copy_name1" class="btn btn-primary">Name</button>
</div>

<div class='custom-menu2 dropdown-menu'>
<button id="copy_3" class="btn btn-primary">Title 3</button>
<button id="copy_4" class="btn btn-primary">Title 4</button>
<br>
<button id="copy_name2" class="btn btn-primary">Name</button>
</div>

<div class='custom-menu3 dropdown-menu'>
<button id="copy_5" class="btn btn-primary">Title 5</button>
<button id="copy_6" class="btn btn-primary">Title 6</button>
<br>
<button id="copy_name3" class="btn btn-primary">Name</button>
</div>

<div class='custom-menu4 dropdown-menu'>
<button id="copy_7" class="btn btn-primary">Title 5</button>
<button id="copy_8" class="btn btn-primary">Title 6</button>
<br>
<button id="copy_name4" class="btn btn-primary">Name</button>
</div>

脚本：

    //1st rightclick menu
$('#demo-container').bind("contextmenu", function (event) {
    event.preventDefault();
    $("div.custom-menu").show();
    $(".custom-menu").appendTo("body").css({
        top: event.pageY + "px",
        left: event.pageX + "px"
    });
}).bind("click", function (event) {
    if (!$(event.target).is(".custom-menu")) {
        $("div.custom-menu").hide();
    }
});

CSS:

    .custom-menu {
z-index:1000;
position: absolute;
padding: 2px;
}
.custom-menu > .btn {
margin: 2px 0px 2px 0px!important;
}

#demo-container{
width:250px;   
}

そのようなことさえ可能ですか？道に迷ったので助けてください。いくつかの方法で解決しようとしましたが、jQueryについては初心者なので方法がわかりません...

少し違う解決方法はありますか？なんでもOK

ありがとうございました