js实例入门一(打开关闭门效果)

最新推荐文章于 2021-05-31 00:28:46 发布

greatverve

最新推荐文章于 2021-05-31 00:28:46 发布

阅读量750

点赞数

分类专栏： JavaScript学习文章标签： stylesheet float url

本文链接：https://blog.csdn.net/greatverve/article/details/3182085

版权

JavaScript学习专栏收录该内容

42 篇文章 0 订阅

订阅专栏

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页</title>
    <link href="mainFrame.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/door.js"></script>
</head>
<body>
    <div id="container">
        <!--导航-->
        <div id="nav">
            导航树
        </div>
        <!--关闭打开导航-->
        <div id="door">
            <img id="doorImg" onclick="return(IsShut(this))" alt="关闭" title="关闭" src="images/door_left.gif" style="cursor:hand;" />
        </div>
        <!--内容部分-->
        <div id="content">
            内容部分
        </div>
    </div>
</body>
</html>
 
     body 
{
    font:12px Tahoma;
    margin:0px;
    text-align:center;
    background-color:Green;
}
#container
{
    width:100%;
}
#nav
{
    float:left;
    width:180px;
}
#door
{
    float:left;
    width:11px;
    background:url(images/door_bg.gif) repeat-y;
}
#content
{
    float:left;
    width:auto;
}
 
         // JScript 文件 
var display = true;
function IsShut(obj)
{
    var nav = document.getElementById("nav");
    if(display)
    {
        nav.style.display = "none";
        display = false;
        obj.src = "images/door_right.gif";
        obj.title = "打开";
    }
    else
    {
        nav.style.display = "block";
        display = true;
        obj.src = "images/door_left.gif"
        obj.title = "关闭";
    }
}
 
        
 
    
 

greatverve

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实例入门一(打开关闭门效果)

html xmlns="http://www.w3.org/1999/xhtml" >head> title>无标题页title> link href="mainFrame.css" rel="stylesheet" type="text/css" /> script type="text/javascript" src="js/door.js">sc
复制链接

扫一扫