Question

我有以下HTML标记：

<ul class="am-type-con">
    <li><a id="Distributor" href="#tabs-1">Distributors UK</a></li>
    <li><a id="International" href="#tabs-2">International</a></li>
</ul>

我还有一个名为map-canvas的DIV ID。如果International上有点击事件，我想隐藏map-canvas DIV。我希望在点击Distributor时重新显示。在jQuery中有一个简单的解决方案吗？感谢

这就是我所拥有的，但这不起作用：

$("#International").click(function(){
    $(this).data('clicked', true);
});
if($('#International').data('clicked')) {
    $( '#map-canvas' ).remove();        
}

Answer 1

尝试以下JS代码：

$('#International').click(function() {
  $('#map-canvas').hide();
});

$('#Distributor').click(function() {
  $('#map-canvas').show();
});

Answer 2

$('#International').click(function() {
    $('#map-canvas').hide();
});

$('#Distributor').click(function() {
    $('#map-canvas').show();
});

Answer 3

您也可以使用：

$('#International').on('click',function() {
   $('#map-canvas').hide();
});

$('#Distributor').on('click',function() {
   $('#map-canvas').show();
});

Answer 4

请参阅JQuery Event Delegation

     var $mapcanv = $('#map-canvas'); //global scope
      $("#International").on('click',function(){

         if ($mapcanv.is(":visible")) {
           $mapcanv.hide();
         }
     });

      $('#Distributor').on('click',function() {

           if ($mapcanv.is(":hidden")) {
              $mapcanv.show();
            }
      });

jQuery，检查点击事件

4 个答案: