Question

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

＆＃13;

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";
  }
}

＆＃13;

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

＆＃13;

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

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

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

Answer 1

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

＆＃13;

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";
     }
 }

＆＃13;

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

＆＃13;

Answer 2

您不必为每个<a>标记编写函数...

首先使用<a>

querySelectorAll

然后使用javascript forEach在每个<a>上添加点击事件
使用for循环将display:none设置为所有div
然后将display:block设置为div id data-id <a> if点击<{1}}
要切换相同的div，请使用return条件，如果该条件成立，请使用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"; }) })

Stack Snippet

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

toggle()

如果您正在寻找 jQuery 解决方案，则必须使用hide()来显示/隐藏相同的div和$(".career-list li a").on("click", function() { var clickedItemId = "#" + $(this).data("id"); if (!$(clickedItemId).is(":visible")) { $(".Info-div").hide(); } $(clickedItemId).toggle(); })以隐藏其他div

Stack Snippet

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

List<String> x = new LinkedList<>(Arrays.asList("A","AAB"));
ExpressionParser parser = new SpelExpressionParser();
StandardEvaluationContext context = new StandardEvaluationContext(x);
parser.parseExpression("x.stream().map(x -> x.replaceAll(\"A\", \"B\")).collect(Collectors.toList())").getValue(context))

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

2 个答案: