`

点击实现div的显隐切换

CSSjQueryHTML 
阅读更多
1.html代码 
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="../../../Jquery/jquery-1[1].3.2.min.js"></script>
    <script type="text/javascript" src="Jquery/JqueryText2.js"></script>
    <link type="text/css" rel="Stylesheet" href="css/JqueryTest2.css" ></link>
</head>
<body>
    <div id="testDiv"></div>
    
    <div id="btnParent">
        <h3>显隐</h3>
        <div id="switcher-normal" class="button selected">normal</div>
        <div id="switcher-norrow" class="button">norrow</div>
        <div id="switcher-large"  class="button" value="large">large</div>
    </div>
</body>
</html>


2.css样式 
.hiden
{
	display:none;
}
.button {
  width: 100px;
  float: left;
  text-align: center;
  margin: 10px;
  padding: 10px;
  background-color: #fff;
  border-top: 3px solid #888;
  border-left: 3px solid #888;
  border-bottom: 3px solid #444;
  border-right: 3px solid #444;
}


3.Jquery代码 
$(document).ready(function(){
//    $("#testDiv").html("<div style=\"border:solid 1px #FF0000\">使用动态创建的$(document).ready(function)方法</div>");
//    $("#switcher-normal").bind("click",function(){
//        $("#btnParent .button").removeClass("selected");
//        
//    });
    var dishid=function(){
        $("#btnParent .button").toggleClass("hiden");
    }; 
    //点击id=btnParent 下h3标签就会触发名为dishid的针对于此id下所有class为button，把它的css样式转换为hiden
    $("#btnParent h3").click(dishid);
});

$(document).ready(function(){
    //为id=btnParent下所有class为button的标签添加鼠标悬停事件，也就是鼠标经过效果hover(经过的效果函数，移出的效果函数)
    $("#btnParent .button").hover(
    function(){
        $(this).addClass("hover");
    }
    ,function(){
        $(this).removeClass("hover");
    });
});

分享到：
| 表格选择
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics