Question

我对div中的javascript显示/隐藏内容有疑问。当我单击第一个按钮时，我从中得到了内容，但是当我单击第二个按钮时，我需要从第一个中隐藏内容，并从第二个div中显示内容。我的代码是：

<script type="text/javascript">
            function showHideDiv(ele) {
                var srcElement = document.getElementById(ele);
                if (srcElement != null) {
                    if (srcElement.style.display == "block") {
                        srcElement.style.display = 'none';
                    }
                    else {
                        srcElement.style.display = 'block';
                    }
                    return false;
                }
            }
            function showHideDiv1(ele) {
                var srcElement = document.getElementById(ele);
                if (srcElement != null) {
                    if (srcElement.style.display == "block") {
                        srcElement.style.display = 'none';
                    }
                    else {
                        srcElement.style.display = 'block';
                    }
                    return false;
                }
            }
        </script>

HTML：

<div class="listsearch-header fl-wrap">
<h3>
<a class="button-one" onClick="showHideDiv('divMsg')" title="Relevant Title" href="#">Places</a>
<a class="button-two" onClick="showHideDiv1('divMsg1')" title="Relevant Title" href="#">Events</a>
</h3>
<div id="divMsg" style=" display:none">
<b>Places</b>
</div>
<div id="divMsg1" style="display:none">
<b>Events</b>
</div>
</div>

单击第二个按钮以隐藏第一个按钮的内容时如何解决此问题。谢谢，所有

Answer 1

您可以根据点击的元素切换类

function showHideDiv(ele) {
  var srcElement = document.getElementById(ele);
  document.querySelectorAll('.box').forEach(a => a.classList.add('hide'))
  if (srcElement != null) {
    srcElement.classList.toggle('hide')
  }
}

.hide {
  display: none;
}

<div class="listsearch-header fl-wrap">
  <h3>
    <a class="button-one" onClick="showHideDiv('divMsg')" title="Relevant Title" href="#">Places</a>
    <a class="button-two" onClick="showHideDiv('divMsg1')" title="Relevant Title" href="#">Events</a>
  </h3>
  <div id="divMsg" class="box hide">
    <b>Places</b>
  </div>
  <div id="divMsg1" class="box hide">
    <b>Events</b>
  </div>
</div>

Answer 2

您可以使用通用函数，该函数将要显示或隐藏的实际元素作为输入参数。

function showHideDiv(show, hide) {
  document.getElementById(show).style.display = "block";
  document.getElementById(hide).style.display = "none";
}

<div class="listsearch-header fl-wrap">
  <h3>
    <a class="button-one" onClick="showHideDiv('divMsg','divMsg1')" title="Relevant Title" href="#">Places</a>
    <a class="button-two" onClick="showHideDiv('divMsg1','divMsg')" title="Relevant Title" href="#">Events</a>
  </h3>
  <div id="divMsg" style=" display:none">
    <b>Places</b>
  </div>
  <div id="divMsg1" style="display:none">
    <b>Events</b>
  </div>
</div>

单击时显示/隐藏内容

2 个答案: