Question

我对使用Java脚本很陌生，我在努力实现自己的目标。我使用创建了4个按钮；

<input type="button" name="answer" value="Brave" onclick="showDiv()">

我的目标是，如果单击该按钮，它将更改状态，并且div出现（到此为止）。如果我单击另一个按钮，我希望内容隐藏上一个选定的div，并显示他们刚刚单击的那个。

任何帮助/指导都将不胜感激。

function showDiv() {
document.getElementById('BraveDiv').style.display = "block";
}
function showDiv1() {
document.getElementById('DeterminedDiv').style.display = "block";
}
function showDiv2() {
document.getElementById('CompassionateDiv').style.display = "block";
}
function showDiv3() {
document.getElementById('ConsiderateDiv').style.display = "block";
}

我的目的是，如果您要点击

Answer 1

<tr bgcolor="#f4f4f4">
<td height="25" nowrap="NOWRAP">&nbsp;CME_ES&nbsp;</td>
<td height="25" nowrap="NOWRAP">&nbsp;07:58:46&nbsp;</td>
<td height="25" nowrap="NOWRAP">&nbsp;Connected&nbsp;</td>
<td height="25" nowrap="NOWRAP">&nbsp;0&nbsp;</td>
<td height="25" nowrap="NOWRAP">&nbsp;0&nbsp;</td>
<td height="25" nowrap="NOWRAP">&nbsp;0&nbsp;</td>
<td height="25" nowrap="NOWRAP">&nbsp;0&nbsp;</td>
<td height="25" nowrap="NOWRAP">&nbsp;07:58:00&nbsp;</td>
<td height="25" nowrap="NOWRAP" bgcolor="#55aa2a">&nbsp;--:--:--&nbsp;</td>
<td height="25" nowrap="NOWRAP">&nbsp;0&nbsp;</td>
<td height="25" nowrap="NOWRAP">&nbsp;0&nbsp;</td>
<td height="25" nowrap="NOWRAP">&nbsp;01:25:00 &nbsp;</td>
<td height="25" nowrap="NOWRAP">&nbsp; 22:00:00&nbsp;</td>
</tr>

Answer 2

您附加的代码无法获得您想要的任何结果，但是，很显然，您想要的是什么。

您的按钮应如下所示：

<button role="button" onclick="showDiv('BraveDiv')">Brave</button>

此处，该角色阻止了默认的提交行为。 onclick会告诉您单击按钮时该怎么做，“ BraveDiv”是我们将传递给该函数的参数，告诉它要显示哪个div。

与以上按钮关联的DIV应该如下所示：

<div id="BraveDiv" style="display: none;"> SOME CONTENT HERE </div>

在这里，您会注意到ID等于我们上面提到的参数。

您的JavaScript应该如下工作：

<script>

function showDiv(elem){
document.getElementById(elem).style.display = "block";      

}

</script>

我已经附上了一个如下所示的工作示例，只需单击“运行代码段”即可查看该代码段并测试代码。

function showDiv(elem) {
  document.getElementById(elem).style.display = "block";
}

<button role="button" onclick="showDiv('BraveDiv')">Brave</button>
<button role="button" onclick="showDiv('CompassionateDiv')">Compassionate</button>


<div id="BraveDiv" style="display: none;"> SOME BRAVE CONTENT HERE </div>
<div id="CompassionateDiv" style="display: none;"> SOME COMPASSIONATE CONTENT HERE </div>

但是，以上内容仅显示您的分录。

对此的完整jQuery解决方案（按标签隐藏/显示）将是：

<script>   

    function showDiv(elem) { // When the button is pressed
    $("div").each(function() { // For each Div
        if ($(this).attr('id') != elem) { // If the Div's id is not equal to the parameter
          $(this).css("display", "none");
        } // HIDE IT
        else {
          $(this).css("display", "block"); // SHow It
        });

</script>

如果您不熟悉jQuery，并且希望使用仅JavaScript的解决方案，则：

<script>

function showDiv(elem){

var divsToCheck = ["BraveDiv", "CompassionateDiv"]; // Add to here to check more divs
for(let i = 0; i < divsToCheck.length; i++){
if(divsToCheck[i] == elem){
document.getElementById(divsToCheck[i]).style.display = "block";
    }

else{
document.getElementById(divsToCheck[i]).style.display = "none";
    }

}
</script>

同样，我在下面附上了一段代码。

function showDiv(elem) {

  var divsToCheck = ["BraveDiv", "CompassionateDiv"]; // Add to here to check more divs
  for (var i = 0; i < divsToCheck.length; i++) {
    if (divsToCheck[i] == elem) {
      document.getElementById(divsToCheck[i]).style.display = "block";
    } else {
      document.getElementById(divsToCheck[i]).style.display = "none";
    }

  }

}

<button role="button" onclick="showDiv('BraveDiv')">Brave</button>
<button role="button" onclick="showDiv('CompassionateDiv')">Compassionate</button>


<div id="BraveDiv" style="display: none;"> SOME BRAVE CONTENT HERE </div>
<div id="CompassionateDiv" style="display: none;"> SOME COMPASSIONATE CONTENT HERE </div>

Answer 3

function showDiv() {
document.getElementById('BraveDiv').style.display = "block";
document.getElementById('DeterminedDiv').style.display = "none";
document.getElementById('CompassionateDiv').style.display = "none";
document.getElementById('ConsiderateDiv').style.display = "none";
}
function showDiv1() {
document.getElementById('BraveDiv').style.display = "none";
document.getElementById('DeterminedDiv').style.display = "block";
document.getElementById('CompassionateDiv').style.display = "none";
document.getElementById('ConsiderateDiv').style.display = "none";
}
function showDiv2() {
document.getElementById('BraveDiv').style.display = "none";
document.getElementById('DeterminedDiv').style.display = "none";
document.getElementById('CompassionateDiv').style.display = "block";
document.getElementById('ConsiderateDiv').style.display = "none";
}
function showDiv3() {
document.getElementById('BraveDiv').style.display = "none";
document.getElementById('DeterminedDiv').style.display = "none";
document.getElementById('CompassionateDiv').style.display = "none";
document.getElementById('ConsiderateDiv').style.display = "block";
}

这可能不是最流畅的方法，但可以为您带来所需的结果。按下每个按钮时，所有其他按钮都将关闭。

Answer 4

您只需要将其余display的{{1}}样式设置回<div>。最简单的方法是先将所有全部设置为none，然后将其设置为none可见：

注意：我使用了一个以目标block的id为参数的函数，以减少编写的代码量，但是如果您愿意，可以轻松地将其粘贴粘贴到单独的函数中要求。

<div>

function showDiv(divName) {
  // First hide all the divs
  document.getElementById('BraveDiv').style.display = 'none';
  document.getElementById('DeterminedDiv').style.display = 'none';
  document.getElementById('CompassionateDiv').style.display = 'none';
  document.getElementById('ConsiderateDiv').style.display = 'none';
  
  // Then show the div corresponding to the button clicked
  document.getElementById(divName).style.display = 'block';
}

还有其他方法可以减少代码，例如，使用少量CSS和document.querySelectorAll()的方法：

<input type="button" value="Brave" onclick="showDiv('BraveDiv')">
<input type="button" value="Determined" onclick="showDiv('DeterminedDiv')">
<input type="button" value="Compassionate" onclick="showDiv('CompassionateDiv')">
<input type="button" value="Considerate" onclick="showDiv('ConsiderateDiv')">

<div id="BraveDiv" style="display: none">BraveDiv</div>
<div id="DeterminedDiv" style="display: none">DeterminedDiv</div>
<div id="CompassionateDiv" style="display: none">CompassionateDiv</div>
<div id="ConsiderateDiv" style="display: none">ConsiderateDiv</div>

function showDiv(divName) {
  // First remove the selected class from all divs in output-divs
  document.querySelectorAll('#output-divs > .selected').forEach(element => {
    element.classList.remove('selected');
  });
  
  // Then add it to the div corresponding to the button clicked
  document.getElementById(divName).classList.add('selected');
}

.output-div:not(.selected) {
  display: none;
}

Answer 5

$(document).ready(function() {
    $("#btn1").click(function(){
        showDiv('div1');
    });
    $("#btn2").click(function(){
        showDiv('div2');
    });
    $("#btn3").click(function(){
        showDiv('div3');
    });
    $("#btn4").click(function(){
        showDiv('div4');
    });    
});

function showDiv(_divId){
	$(".div-class").each(function() {
    	if(!$(this).hasClass('div-hide'))
        $(this).addClass('div-hide');
	});
        
	$('#' + _divId).removeClass('div-hide');
}

.div-class {
    	min-height: 50px;
        border: 1px solid #eee;
        margin: 10px;
        padding: 10px;
        width: 100%;
    }
    .div-hide {
    	display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn3">Button 3</button>
<button id="btn4">Button 4</button>

<div id="div1" class='div-class div-hide'><h3>Div1 Content </h3></div>
<div id="div2" class='div-class div-hide'><h3>Div2 Content </h3></div>
<div id="div3" class='div-class div-hide'><h3>Div3 Content </h3></div>
<div id="div4" class='div-class div-hide'><h3>Div4 Content </h3></div>

Javascript，打开/关闭功能

5 个答案: