タブを使用せずにjQueryダイアログ内の異なるコンテンツを参照する

Question

jQuery UIダイアログボックスを3つ作成しているので、クリックしたボタンによって異なるコンテンツをダイアログボックスに表示できます。

これまでに、3つのボタンを設定してダイアログボックスを起動しました。

ie。 - 最初は3つのボタンがあります - 誰かをクリックするとダイアログボックスのポップアップが表示されます - ボタン1をクリックすると、ダイアログボックスのボタン1が太字になり、コンテンツ1が表示されます。それぞれのボタンは大胆になり、それぞれのコンテンツが表示されます私は

をクリックしてその最初のボタンによると私は持っている - と私は自由にダイアログボックス のボタンをクリックして内容を切り替えることができます（これらには、するにはあまりにも複雑であるとして、CSSスタイルなし、申し訳ありません）>>>>>> JSFiddle

$(document).ready(function(){ 
    $('#helpDialogPop').dialog({ 
     autoOpen:false, 
     modal: true 
    }).dialog("widget") 
     .next(".ui-widget-overlay") 
     .css("background", "black") 
     .css("opacity","0.9"); 
    $('#pop1').click(function(){ $('#helpDialogPop').dialog('open'); }); 
    $('#pop2').click(function(){ $('#helpDialogPop').dialog('open'); }); 
    $('#pop3').click(function(){ $('#helpDialogPop').dialog('open'); }); 
}); 

実は私は前に同様の質問をしていると、誰かがタブを使用するように私を提案し、それのためのデモを作成したが、最終的にタブを使用して私が望む効果を得ることはできません。だから私はそれを行うために現在のアプローチを使用しています。

ボタン1のコンテンツを正常に表示できますが、最初のコンテンツページに一緒に表示されないように3つのボタンにコンテンツを定義する方法はわかりません。

もう1つのことは、表示するコンテンツを含めるためにdivや別のHTMLページを使用する必要があるかどうかはわかりません。

誰も私にいくつかのヒントと方向を教えてください、ありがとう。

Answer 1

には別々のHTMLがこれについては詳しく説明し

$(document).ready(function() { 
 
    $('li:first-child, #i1').click(function() { 
 
    $('#main button').css({ 
 
     'display': 'inline-block' 
 
    }); 
 
    $('#i1').addClass("active"); 
 
    $('#i3,#i2').removeClass("active"); 
 
    $('#info1').css({ 
 
     'display': 'block' 
 
    }); 
 
    $('#info2,#info3').css({ 
 
     'display': 'none' 
 
    }); 
 
    }) 
 

 
    $('li:nth-child(2), #i2').click(function() { 
 
    $('#main button').show(); 
 
    $('#i2').addClass("active"); 
 
    $('#i1,#i3').removeClass("active"); 
 
    $('#info2').css({ 
 
     'display': 'block' 
 
    }); 
 
    $('#info1,#info3').css({ 
 
     'display': 'none' 
 
    }); 
 
    }) 
 
    $('li:nth-child(3), #i3').click(function() { 
 
    $('#main button').show(); 
 
    $('#i3').addClass("active"); 
 
    $('#i1,#i2').removeClass("active"); 
 
    $('#info3').css({ 
 
     'display': 'block' 
 
    }); 
 
    $('#info2,#info1').css({ 
 
     'display': 'none' 
 
    }); 
 
    }); 
 

 
});

#info1, 
 
#info2, 
 
#info3 { 
 
    display: none; 
 
    position: absolute; 
 
    top: 70px; 
 
    background: #454545; 
 
    width: 300px; 
 
    height: 500px; 
 
    color: white; 
 
} 
 
.active { 
 
    background: green; 
 
} 
 
ul li { 
 
    display: inline-block; 
 
    list-style-type: none; 
 
    background: lightblue; 
 
    border: 1px solid black; 
 
} 
 
button { 
 
    display: none; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main"> 
 
    <ul> 
 
    <li>1nfo</li> 
 
    <li>info2</li> 
 
    <li>info3</li> 
 
    </ul> 
 

 
    <button id="i1">info1</button> 
 
    <button id="i2">info2</button> 
 
    <button id="i3">info3</button> 
 
    <div id="info1">description of info1</div> 
 
    <div id="info2">description of info2</div> 
 
    <div id="info3">description of info3</div> 
 
</div>