javascript - 按下按钮时如何显示div的内容而不是值？

Question

我希望按钮通过单击按钮一次显示一个 div。我该怎么做？或者我从哪里开始。我是 JavaScript 的新手。到目前为止，我看到的大多数示例都是返回一个 value。下面是代码:

function showDiv(me) {
  /* Disabled buttons accordingly*/
  $('.navbutton').prop('disabled', false);
  $(me).prop('disabled', true);

  /*How do I show the contents of each division only when their respective button is pressed*/

  /*Below is show the value when their respective button is pressed*/
  $('#myDiv').html($(me).val());

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="firstbutton">
  <button class="navbutton" value="home" onclick="showDiv(this);">Table</button>
  <table>
    <tr>
      <th>Column A</th>
    </tr>
    <tr>
      <td>A.1 Introduction</td>
    </tr>
    <tr>
      <td>A.2 History</td>
    </tr>
  </table>
</div>

<div id="secondbutton">
  <button class="navbutton" value="about" onclick="showDiv(this);">Others</button>
  <h2>Miscellaneous items</h2>
</div>

<div id="myDiv"></div>

Answer 1

试试这个

    function showDiv(me) {
        /* Disabled buttons accordingly*/
        $('.navbutton').prop('disabled', false);
        $(me).prop('disabled', true);
        //the below line will get the innerHTML of this clicked elements parent node and place that content in div with id "myDiv"
        $('#myDiv').html(me.parentNode.innerHTML);

    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="firstbutton">
  <button class="navbutton" value="home" onclick="showDiv(this);">Table</button>
  <table>
    <tr>
      <th>Column A</th>
    </tr>
    <tr>
      <td>A.1 Introduction</td>
    </tr>
    <tr>
      <td>A.2 History</td>
    </tr>
  </table>
</div>

<div id="secondbutton">
  <button class="navbutton" value="about" onclick="showDiv(this);">Others</button>
  <h2>Miscellaneous items</h2>
</div>

<div id="myDiv"></div>