Div的显示与隐藏

  ·   jQuery     浏览量:

无样式版(用js代码改变css样式的方法来显示隐藏):

  • Js:
function isHidden(oDiv){
   var vDiv = document.getElementById(oDiv);
   vDiv.style.display = (vDiv.style.display == 'block')?'none':'block';
}
  • Html:
<a href="javascript:void(0)" onclick="isHidden('h_bottom')">a标签</a>
<div id="h_bottom">显示隐藏div</div>

(h_bottom是要显示隐藏的div的id,它的display一开始设置为none)

滑动版:

  • Js:
 $(document).ready(function(){
        $('#click').click(function(){
            $('#h_bottom').slideToggle();
            });
   });

(jQuery slideToggle()方法就是滑进滑出的综合,可以在slideDown()和slideUp()方法之间进行切换!!而jQuery的hide()方法和show()方法只是隐藏和显示,没有任何样式!除了这两种,还有淡入淡出方法。)

  • Html:
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/index.js"></script>

(ps:jquery的js文件一定要引用在jQuery代码文件之前,避免出现$ is not define的错误)

<a href="javascript:void(0)" id="click">a标签</a>
<div id="h_bottom">显示隐藏div</div>


收起 >>
Div的显示与隐藏