单击后jQuery无法正常工作

罗德里戈·B。

我正在尝试创建一个数据中心选择脚本，该脚本将在单击时更改选定的标志，并同时显示/隐藏带有计划和内容的两个div。

但是，当我将其添加$("#conteudoID").hide()到jQuery代码中时，它将破坏所有内容（如果不执行此操作，它将正确更改颜色/选定标志）。

这是我的代码的小提琴：https : //jsfiddle.net/rbaldasso/g5ax9nbn/2/

代码：

$("#conteudo2").hide();
$("#conteudo1").hide();

$('.childDiv').click(function() {
  $(this)
    .css('background-color', '#4f5154')
  $("#conteudo2").hide()
  $("#conteudo1").show()
    .siblings(".childDiv")
    .css('background-color', '#9c9c9c')
  $("#conteudo2").show()
  $("#conteudo1").hide();
});;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Escolha um Data Center</h3>
<div class="container" id="divParent1" class="parentDiv">
  <div class="childDiv fixed" id="child1">
    <img src="https://lipis.github.io/flag-icon-css/flags/4x3/br.svg" width="90px">
    <br>Brasil - São Paulo</div>
  <div class="childDiv flex-item" id="child2">
    <img src="https://lipis.github.io/flag-icon-css/flags/4x3/us.svg" width="90px">
    <br>Estados Unidos - Kansas</div>
</div>

<div id="conteudo1" class="conteudo">
  apareci br
</div>
<div id="conteudo2" class="conteudo">
  apareci eua
</div>

亚当·卡尔维特·布尔

试试这个：

        $("#conteudo2").hide();
        $("#conteudo1").hide();

        $('#child1').click(function(){
            $(this)
            .css('background-color','#4f5154')
            .siblings(".childDiv")
            .css('background-color','#9c9c9c');

            $("#conteudo1").show();
            $("#conteudo2").hide();
        });

        $('#child2').click(function(){
            $(this)
            .css('background-color','#4f5154')
            .siblings(".childDiv")
            .css('background-color','#9c9c9c');

            $("#conteudo2").show();
            $("#conteudo1").hide();
        });

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。