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>

Answer 2

这里是一个例子。利用jquery函数。 .show()

JAVASCRIPT

function showDiv() {
    $('#myDiv').show(100);
}

HTML

<button class="navbutton" value="about" onclick="showDiv();">Others</button>

Answer 3

尝试

$('#myDiv').html(me.parentElement.innerHTML);

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.parentElement.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>

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

3 个答案: