单击显示新div的新div后，如何隐藏当前div

How to hide current div once you click a new div that shows a new one. the code below it will show and hide div, but what im trying to do once you click the first item and click another item both of them will show up how can i make it possible once you clock another item the first item that you click will hide

单击显示新div的新div后，如何隐藏当前div。它下面的代码将显示和隐藏div，但是一旦你点击第一个项目然后点击另一个项目我会尝试做什么它们将显示我怎样才能使你成为可能一旦你计时另一个项目你点击的第一个项目将隐藏

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display == "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

function myDIVS() {
  var x = document.getElementById("myDIVS");
  if (x.style.display == "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

<ul class="career-list">
  <li class="career-item"> <a href="#" onclick="myFunction()"> Foreman </a> </li>
  <li class="career-item"> <a href="#" onclick="myDIVS()"> Foreman </a> </li>
</ul>

<div class="col-md-8 Info-div" id="myDIV">
  <h3> SEND US YOUR RESUME </h3>
</div>
<div class="col-md-8 Info-div" id="myDIVS">
  <h3> SEND US YOUR RESUME TWO </h3>
</div>

Second Code (But its not closing once you click the same item)

第二个代码（但是一旦你点击同一个项目它就没有关闭）

HTML

HTML

<ul class="career-list">
  <li class="career-item"> <a href="javascript:void(0);" data-id="myDIV"> Foreman </a> </li>
  <li class="career-item"> <a href="javascript:void(0);" data-id="myDIVS"> Foreman </a> </li>
  <li class="career-item"> <a href="javascript:void(0);" data-id="myDIVSS"> Foreman </a> </li>
  <li class="career-item"> Foreman </li>
</ul>

Javascript

使用Javascript

$(document).ready(function() {
  $('ul li').click(function() {
    $('.Info-div').hide();
    $('#' + $(this).find('a').data('id')).show();
  });
});

2 个解决方案

#1

You can hide the another div in the else block:

您可以隐藏else块中的另一个div：

document.getElementById("myDIV").style.display = 'none';
document.getElementById("myDIVS").style.display = 'none';
function myFunction() {
    var x = document.getElementById("myDIV");
    var y = document.getElementById("myDIVS");
    if (x.style.display == "block") {
        x.style.display = "none";
    } else {
        x.style.display = "block";
        y.style.display = "none";
    }
}

function myDIVS() {
     var x = document.getElementById("myDIVS");
     var y = document.getElementById("myDIV");
     if (x.style.display == "block") {
         x.style.display = "none";
     } else {
         x.style.display = "block";
         y.style.display = "none";
     }
 }

<ul class="career-list">
  <li class="career-item"> <a href="#" onclick="myFunction()"> Foreman </a> </li>
  <li class="career-item"> <a href="#" onclick="myDIVS()"> Foreman </a> </li>
</ul>

<div class="col-md-8 Info-div" id="myDIV">
  <h3> SEND US YOUR RESUME </h3>
</div>
<div class="col-md-8 Info-div" id="myDIVS">
  <h3> SEND US YOUR RESUME TWO </h3>
</div>

#2

You don't have to write functions for every <a> tag...

您不必为每个标签编写函数...

• First get all the <a> tag in an array using querySelectorAll

  首先使用querySelectorAll获取数组中的所有标记

• Then use javascript forEach to add a click event on every <a>

  然后使用javascript forEach在每个上添加一个click事件

• Use for loop to set display:none to all the divs

  使用for循环将display：none设置为所有div

• Then set the display:block to that div which has same id value as of data-id on <a> click

  然后将display：block设置为与 click上的data-id具有相同id值的div

• And to toggle the same div use a if condition and if that condition become true, exit the function using return

  要切换相同的div使用if条件，如果该条件变为true，则使用return退出该函数

Stack Snippet

堆栈代码段

var anchor = document.querySelectorAll("a[data-id]");
var div = document.querySelectorAll(".Info-div");
anchor.forEach(function(elem) {
  elem.addEventListener('click', function() {
    var dataID = elem.getAttribute('data-id');
    var divID = document.getElementById(dataID);
    //to toggle the div
    if (divID.style.display === "block") {
      divID.style.display = "none";
      return;
    }
    //for all divs
    for (var i = 0; i < div.length; i++) {
      div[i].style.display = "none";
    }
    //for currentDiv
    divID.style.display = "block";
  })
})

.Info-div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="career-list">
  <li class="career-item">
    <a href="javascript:void(0);" data-id="myDIV">Foreman</a>
  </li>
  <li class="career-item">
    <a href="javascript:void(0);" data-id="myDIVS"> Foreman </a>
  </li>
  <li class="career-item">
    <a href="javascript:void(0);" data-id="myDIVSS"> Foreman </a>
  </li>
</ul>

<div class="col-md-8 Info-div" id="myDIV">
  <h3> SEND US YOUR RESUME ONE</h3>
</div>
<div class="col-md-8 Info-div" id="myDIVS">
  <h3> SEND US YOUR RESUME TWO </h3>
</div>
<div class="col-md-8 Info-div" id="myDIVSS">
  <h3> SEND US YOUR RESUME THREE </h3>
</div>

And if you are looking for the jQuery solution, you have to use toggle() to show/hide the same div and hide() to hide other divs

如果你正在寻找jQuery解决方案，你必须使用toggle（）来显示/隐藏相同的div和hide（）来隐藏其他div

Stack Snippet

堆栈代码段

$(".career-list li a").on("click", function() {
  var clickedItemId = "#" + $(this).data("id");
  if (!$(clickedItemId).is(":visible")) {
    $(".Info-div").hide();
  }
  $(clickedItemId).toggle();
})

.Info-div {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="career-list">
  <li class="career-item">
    <a href="javascript:void(0);" data-id="myDIV">Foreman</a>
  </li>
  <li class="career-item">
    <a href="javascript:void(0);" data-id="myDIVS"> Foreman </a>
  </li>
  <li class="career-item">
    <a href="javascript:void(0);" data-id="myDIVSS"> Foreman </a>
  </li>
</ul>

<div class="col-md-8 Info-div" id="myDIV">
  <h3> SEND US YOUR RESUME ONE</h3>
</div>
<div class="col-md-8 Info-div" id="myDIVS">
  <h3> SEND US YOUR RESUME TWO </h3>
</div>
<div class="col-md-8 Info-div" id="myDIVSS">
  <h3> SEND US YOUR RESUME THREE </h3>
</div>