Question

我有下一个代码

<script type="text/javascript">
    $(window).load(function(){
            debugger
            $('#comp').ready(function() {
                $('#QV101').css("display", "inline");
                $('#QV102').css("display", "none");
                $('#QV103').css("display", "none");
            });

            $('#comp').on('click', function(event) {
                debugger
                $('#QV101').css("display", "inline");
                $('#QV102').css("display", "none");
                $('#QV103').css("display", "none");  
            });
            $('#mes').on('click', function(event) {
                debugger
                $('#QV101').css("display", "none");
                $('#QV102').css("display", "inline");
                $('#QV103').css("display", "none");

            });
            $('#hora').on('click', function(event) {
                debugger
                $('#QV102').css("display", "none");
                $('#QV101').css("display", "none");
                $('#QV103').css("display", "inline");

            });
            debugger

        });
</script>

问题是脚本显示了元素idQV101，但是当我单击其他按钮时，这些按钮在Web控制台中没有反过来显示css更改正确但在屏幕中没有显示。我不想使用隐藏，因为在屏幕上出现了一个丑陋的差距。因为在这些元素下还有其他因素，因为在这些元素下还有其他元素

这是html代码值#QV ...因为我插入qlik代码并显示图表

Comparativa Consumo mes consorao hora Consumo dia

                <div id="QV101" class="col-md-12 qvobject">    
                </div>
                <div id="QV102" class="col-md-12 qvobject">       
                </div>
                <div id="QV103" class="col-md-12 qvobject">

                </div>

            </div>



            <div class="row">
                <div id="QV114" class="col-md-2 qvplaceholder">

                </div>
                <div id="QV115" class="col-md-2 qvplaceholder">

                </div>
                <div id="QV117" class="col-md-2 qvplaceholder">

                </div>

            </div>
        </div>
    </div>

谢谢

Answer 1

这是一段代码，显示您的代码正常运行：

$(window).load(function(){
  debugger
  $('#comp').ready(function() {
    $('#QV101').css("display", "inline");
    $('#QV102').css("display", "none");
    $('#QV103').css("display", "none");
  });
  $('#comp').on('click', function(event) {
    debugger
    $('#QV101').css("display", "inline");
    $('#QV102').css("display", "none");
    $('#QV103').css("display", "none");  
  });
  $('#mes').on('click', function(event) {
    debugger
    $('#QV101').css("display", "none");
    $('#QV102').css("display", "inline");
    $('#QV103').css("display", "none");

  });
  $('#hora').on('click', function(event) {
    debugger
    $('#QV102').css("display", "none");
    $('#QV101').css("display", "none");
    $('#QV103').css("display", "inline");

  });
  debugger
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="comp">comp</button>
<button id="mes">mes</button>
<button id="hora">hora</button>
<div id="QV101">QV101</div>
<div id="QV102">QV102</div>
<div id="QV103">QV103</div>

<script type="text/javascript">

</script>

Answer 2

$('#QV101').addClass('show');
$('#QV101').siblings(':not(button)').addClass('hide')



$('#comp').on('click', function(event) {
  $('#QV101').siblings(':not(button)').removeClass('show');
  $('#QV101').addClass('show');
  $('#QV101').siblings(':not(button)').addClass('hide');
});
$('#mes').on('click', function(event) {
  $('#QV102').siblings(':not(button)').removeClass('show');
  $('#QV102').addClass('show');
  $('#QV102').siblings(':not(button)').addClass('hide');
});
$('#hora').on('click', function(event) {
  $('#QV103').siblings(':not(button)').removeClass('show');
  $('#QV103').addClass('show');
  $('#QV103').siblings(':not(button)').addClass('hide');

});

.hide {
  display: none
}
.show {
  display: block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="QV101">1</div>
<div id="QV102">2</div>
<div id="QV103">3</div>


<button id="comp">comp</button>
<button id="mes">mes</button>
<button id="hora">hora</button>

添加:not(button)以排除按钮（也可以使用兄弟（div））
使用.siblings()获取所有div。
根据点击的按钮添加/删除课程

Answer 3

以下是我在上述评论中描述的方法。这将减少代码行和易于维护。 JSFIddle链接如下：

更新后的守则如下：

$(function(){

    $('#comp').ready(function() {
    $('#QV101').css("display", "inline");
    $('#QV102').css("display", "none");
    $('#QV103').css("display", "none");
  });

  $('#comp').on('click', function(event) {
    $('.toggleDiv').hide();
    $('#QV101').css("display", "inline");    
  });
  $('#mes').on('click', function(event) {
    $('.toggleDiv').hide();    
    $('#QV102').css("display", "inline");
  });
  $('#hora').on('click', function(event) {
    $('.toggleDiv').hide();    
    $('#QV103').css("display", "inline");
  });

});

Working Fiddle

Answer 4

我解决了问题的部分原因是代码

<script type="text/javascript">
$(window).load(function(){
debugger

 $('#QV101').css("display", "inline");
 $('#QV102').css("display", "none");
 $('#QV103').css("display", "none");

$('#comp').on('click', function(event) {
 debugger
 $('#QV101').css("display", "inline");
 $('#QV102').css("display", "none");
 $('#QV103').css("display", "none");  
});
$('#mes').on('click', function(event) {
debugger
 $('#QV101').css("display", "none");
 $('#QV102').css("display", "inline");
 $('#QV103').css("display", "none");

});
$('#hora').on('click', function(event) {
debugger
 $('#QV102').css("display", "none");
 $('#QV101').css("display", "none");
 $('#QV103').css("display", "inline");

});
debugger
});
    </script>

现在问题是qv是一个qlik图表，当我稍后滚动很少时，这并没有显示这个节目的第一次。问题不在于代码是图表，它是为外部应用程序Qlik创建的，

感谢所有答案

Jquery更改显示css无法正常工作

4 个答案: