Просмотр другого содержимого в диалоговом окне jQuery без использования вкладок

Я создаю диалоговое окно jQuery UI Dialog с тремя кнопками в нем, чтобы я мог отображать разные материалы в диалоговом окне в соответствии с разными кнопками, которые я нажал.

И до этого я установил три кнопки для запуска диалогового windows.

то есть. – изначально у меня есть 3 кнопки – нажму на кого-нибудь из них приведет к всплывающему окну диалогового windows – при нажатии на кнопку 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, но я не знаю, как определить контент на три отдельные кнопки, чтобы они не отображались вместе на первой странице контента.

Еще одна вещь заключается в том, что я не совсем уверен, следует ли использовать div или отдельные страницы html для содержания содержимого для отображения.

Кто-нибудь, пожалуйста, дайте мне несколько советов и направлений, пожалуйста, спасибо.

Создайте 3 разных div для 3 разных кнопок. Не требуется отдельный 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; } 
  
  • 1nfo
  • info2
  • info3
description of info1
description of info2
description of info3