Question

我正在尝试创建一个数据中心选择脚本，当单击它时，它将更改所选标志，并显示/隐藏两个带有计划和内容的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>

Answer 1

试试这个：

        $("#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();
        });

单击后jQuery无法正常工作

1 个答案: