首页 > 语言 > JavaScript > 正文

Javascript与jQuery方法的隐藏与显示

2024-05-06 16:14:47
字体:
来源:转载
供稿:网友
这篇文章主要通过实例向大家介绍了Javascript与jQuery方法的隐藏与显示的方法,需要的朋友可以参考下
 

示例代码很简单,直接奉上,就不多废话了

 

复制代码代码如下:

<html> 
<head> 
<title>denotoggle</title> 
<style> 
#box { 
    width: 100px; 
    height: 100PX; 
    background-color: #ddd 

.show { 
    visibility: hidden; 

</style> 
<script src="jquery/1.8.2/jquery.min.js"></script> 
<!-- //java script方法 --> 
<script type="text/javascript"> 
    window.onload = function() { 
        function toglemain() { 
            var obj = document.getElementById("box"); 
            if (obj.className == "") { 
                obj.className = "show"; 
            } else { 
                obj.className = ""; 
            } 
        } 
        var clickbutton = document.getElementById("toggle"); 
        clickbutton.onclick = toglemain; //OnClick方法与Click事件 点击一下Button,实际上是先执行OnClick方法,但是问什么,同时还出发了Click事件呢?这是因为,OnClick方法内部触发了Click事件。 
    } 
</script> 
<!-- //jQuery Toggle方法 --> 
<script type="text/javascript"> 
    $(document).ready(function() { 
        $(".btn1").click(function() { 
            /* $("p#box").toggle(); */ 
            $("#box").toggleClass("show"); 
        }); 
    }); 
</script> 
</head> 
<body> 
    <div id="box"></div> 
    <button id="toggle">javascript toggle</button> 
    <button class="btn1">jQuery Toggle</button> 
</body> 
</html> 

 

小伙伴们是否了解清楚了Javascript与jQuery方法的隐藏与显示的方法了呢,需要的小伙伴自己来拿走吧。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选