点击实现div的显隐切换

最新推荐文章于 2023-02-19 21:33:47 发布

dongguojun

最新推荐文章于 2023-02-19 21:33:47 发布

阅读量515

点赞数

CC 4.0 BY-SA版权

分类专栏： Jquery 文章标签： CSS jQuery HTML ViewUI

本文链接：https://blog.youkuaiyun.com/dongguojun/article/details/83526425

Jquery 专栏收录该内容

8 篇文章

订阅专栏

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");
    });
});