English | 正體中文 | 简体中文

jQuery 基本效果


改变一个元素的display为block或hidden
//更改css diplay 为 'block'
$("div").show();  

//更改css diplay 为 'hidden'
$("div").hide();

范例
LEFT
MIDDLE
RIGHT

在方块上点选可隐藏文字

范例程式码Expand
<!-- HTML -->
<style>
  #example-section29 div {
    float:left;width:60px;height:60px;border:0px solid black;padding:5px;
    text-align:center;margin-right:15px;margin-top:5px;margin-bottom:5px;
  }

  #example-section29 span {
    float:left;width:60px;height:60px;border:1px solid black;padding:5px;
    text-align:center;margin-right:15px;margin-top:5px;margin-bottom:5px;
  }
</style>
<div id="example-section29">
    <span><div id="div291">LEFT</div></span>
    <span><div id="div292">MIDDLE</div></span>    
    <span><div id="div293">RIGHT</div></span>    
    <br style="clear:both"/>Click on squre to hide it    
</div>



<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function (){
    $("#example-section29 div").click(function(){
        $("#example-section29 div").each(function(){
            $(this).show();
        });
        
        $(this).hide();
    });
});
</script>




交替显示或隐藏元素
$("div").toggle();

范例
Goat

 

范例程式码Expand
<!-- HTML -->
<style>
  #example-section30 div {
    float:left;width:50px;height:50px;border:1px solid black;padding:5px;
    text-align:center;margin-right:15px;margin-top:5px;margin-bottom:5px;
  }
</style>
<div id="example-section30">
    <div id="div301" style="display:none">Tiger</div>    
    <div id="div302">Goat</div>
    <br style="clear:both"/>
    <button id="btn303" type="button">toggle</button>&nbsp;    
    <button id="btn304" type="button">toggle with animation</button>    
</div>



<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
    $("#example-section30 button[id='btn303']").click(function(){    
        $("#example-section30 div").toggle();
    });

    $("#example-section30 button[id='btn304']").click(function(){    
        $("#example-section30 div").toggle("slow");
    });
});
</script>



© 2012 PureExample.com contact