javascript - 在不使用选项卡的情况下浏览 jQuery 对话框中的不同内容

Question

我正在创建一个 jQuery UI 对话框，里面有 3 个按钮，这样我就可以根据我点击的不同按钮在对话框中显示不同的内容。

在此之前，我设置了三个按钮来触发对话框。

即。- 最初我有 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'); });
});

其实我之前也问过类似的问题，有人建议我使用tab，但是最终使用tab并没有达到我想要的效果。所以我正在使用当前的方法来做到这一点。

我可以成功显示按钮 1 的内容，但我不知道如何将内容定义为三个单独的按钮，以便它们不会一起出现在第一个内容页面中。

还有一件事是我不太确定是否应该使用 div 或一些单独的 html 页面来包含要显示的内容。

谁能给我一些提示和方向，谢谢。

Answer 1

为 3 个不同的按钮创建 3 个不同的 div，不需要单独的 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>