Question

我有以下几个片段：我的HTML页面使用4个按钮来显示/隐藏4个div，每个div都有自己的内容。

＆＃13;

var otherDivs = ["addCustomer", "searchCustomer", "addItem", "searchItem"];

function show(target) {

  var index = otherDivs.indexOf(target);
  for (i = 0; i < otherDivs.length; i++) {
    if (i != index) {
      $(document.getElementById(otherDivs[i].toString())).hide();
    } else {
      $(document.getElementById(otherDivs[i].toString())).show();
    }
  }

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
  <div class="row" name="tabs">
    <button class="redButton" onclick="show('addCustomer')">Add Customer</button>
    <button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
    <button class="redButton" onclick="show('addItem')">Add Item</button>
    <button class="redButton" onclick="show('searchItem')">Search Item</button>
  </div>
  <div class="row trigger" name="searchCustomer" id="searchCustomer">
    ...
  </div>
  <div class="row trigger" name="addCustomer" id="addCustomer">
    ...
  </div>
  <div class="row trigger" name="addItem" id="addItem">
    ...
  </div>
  <div class="row trigger" name="searchItem" id="searchItem">
    ...
  </div>

</div>

＆＃13;

问题是，只有第一个按钮和div（addCustomer）正常工作。我尝试过拆分方法，但我更喜欢保留单一方法。任何帮助表示赞赏。

Answer 1

拥有jQuery时完全使用它。

虽然使用HTML和内联脚本，但这可行：

function show(target) {
  $('.trigger').hide();
  $("#"+ target).show();
}

就像这样（但它不像单选按钮那样作为单选按钮）：

function show(target) {
  $("#"+ target).toggle();
}

我强烈建议您使用不显眼的代码并将脚本移出HTML

＆＃13;

$(function() {
  $(".redButton").on("click",function() { // any button
    $(".trigger").hide(); // hide the divs
    $("#"+$(this).data("id")).show(); // show the relevant div
  });
});

＆＃13;

.trigger { display:none }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
  <div class="row" name="tabs">
    <button type="button" class="redButton" data-id="addCustomer">Add Customer</button>
    <button type="button" class="redButton" data-id="searchCustomer">Search Customers</button>
    <button type="button" class="redButton" data-id="addItem">Add Item</button>
    <button type="button" class="redButton" data-id="searchItem">Search Item</button>
  </div>
  <div class="row trigger" name="searchCustomer" id="searchCustomer">
    Search Customer
  </div>
  <div class="row trigger" name="addCustomer" id="addCustomer">
    Add Customer
  </div>
  <div class="row trigger" name="addItem" id="addItem">
    Add Item
  </div>
  <div class="row trigger" name="searchItem" id="searchItem">
    Search Item
  </div>

</div>

＆＃13;

Answer 2

实际上你的代码工作正常，但问题是你不能指定现在打开哪个div，因为所有divs都有相同的内容，所以当你添加数字或不同的内容时，你可以知道哪个一个现在开放

var otherDivs = ["addCustomer", "searchCustomer", "addItem", "searchItem"];

function show(target) {

  var index = otherDivs.indexOf(target);
  for (i = 0; i < otherDivs.length; i++) {
    if (i != index) {
      $(document.getElementById(otherDivs[i].toString())).hide();
    } else {
      $(document.getElementById(otherDivs[i].toString())).show();
    }
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
  <div class="row" name="tabs">
    <button class="redButton" onclick="show('addCustomer')">Add Customer</button>
    <button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
    <button class="redButton" onclick="show('addItem')">Add Item</button>
    <button class="redButton" onclick="show('searchItem')">Search Item</button>
  </div>
  <div class="row trigger" name="searchCustomer" id="searchCustomer">
    .11..
  </div>
  <div class="row trigger" name="addCustomer" id="addCustomer">
    .22..
  </div>
  <div class="row trigger" name="addItem" id="addItem">
    .33..
  </div>
  <div class="row trigger" name="searchItem" id="searchItem">
    .44..
  </div>

</div>

Answer 3

Simpy像这样使用JQuery toggle函数

function show(target) {
  $('#'+target).toggle();
}

您可以将代码段中的整个JS替换为这些LOC。 HTML保持不变。

function show(target) {
  $('#'+target).toggle();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
  <div class="row" name="tabs">
    <button class="redButton" onclick="show('addCustomer')">Add Customer</button>
    <button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
    <button class="redButton" onclick="show('addItem')">Add Item</button>
    <button class="redButton" onclick="show('searchItem')">Search Item</button>
  </div>
  <div class="row trigger" name="searchCustomer" id="searchCustomer">
    ...
  </div>
  <div class="row trigger" name="addCustomer" id="addCustomer">
    ...
  </div>
  <div class="row trigger" name="addItem" id="addItem">
    ...
  </div>
  <div class="row trigger" name="searchItem" id="searchItem">
    ...
  </div>

</div>

Answer 4

更新回答

    function show(target) {

    $("#Display").html( $('#' + target).html());
      
      
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="container-fluid" style="padding-top: 10px;">
      <div class="row" name="tabs">
        <button class="redButton" onclick="show('addCustomer')">Add Customer</button>
        <button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
        <button class="redButton" onclick="show('addItem')">Add Item</button>
        <button class="redButton" onclick="show('searchItem')">Search Item</button>
      </div>
      <div class="row trigger" name="searchCustomer" id="searchCustomer" hidden>
        Searching Customers
      </div>
      <div class="row trigger" name="addCustomer" id="addCustomer" hidden>
        Customers added
      </div>
      <div class="row trigger" name="addItem" id="addItem" hidden>
        Items added
      </div>
      <div class="row trigger" name="searchItem" id="searchItem" hidden>
         Searching Items
      </div>
<div id="Display">
</div>
    </div>

使用单一方法显示或隐藏div的按钮

4 个答案: