Javascript与jQuery方法的隐藏与显示

Z时代
2024-01-10
分类：综合

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


<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>