实现同一网页DIV自由切换

最新推荐文章于 2024-05-10 00:28:51 发布

chuanmuzhi2728

最新推荐文章于 2024-05-10 00:28:51 发布

阅读量720

点赞数

原文链接：https://my.oschina.net/u/3377291/blog/888769

版权

在同一个页面实现不同div 的切换更替

设想，我们定义两个大的div各分布在左右两边，左边的放控制标签，右边的div则随左边的事件而改变。意思就跟我们看的手册一样，左边是标题，右边是内容。好的，下面我来写一个简单的切换代码解析吧。

HTML内容

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>博客首页</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/static/js/home.js"></script>
<link href="/static/css/all.css" rel="stylesheet" type="text/css"/>
</head>

<body>

<div id="body-left">//左侧div

</div>

<div id="body-right">//右侧div

<div id="contentmenu1">
博主太懒了，还没有写文章~
</div>
<div id="contentmenu2" style="display: none" >//默认不显现这个div
这是一个博客文标题
</div>

</div>

</body>
</html>

all.css 样式

*{margin: 0;}

.body-home{
margin: 0 auto;
border: 0;
background-color: #F8F8F8;
height: 700px;
width: 960px;
}

#body-left{
margin: 0;
padding-bottom: 20px;
border: 0;
float: left;
width: 220px;
height: auto;
background-color:#F8F8F8;
}

#body-right{
margin:0,0,0,10px;
padding-bottom: 20px;
border: 0;
float: right;
width: 730px;
height: auto;
background-color:#F8F8F8;
}

#contentmenu1{
padding-left: 20px;
height: 130px;
width: 710px;
}

#contentmenu2{
padding-left: 20px;
height: 130px;
width: 710px;
}

home.js 文件

转载于:https://my.oschina.net/u/3377291/blog/888769

chuanmuzhi2728

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
实现同一网页DIV自由切换

在同一个页面实现不同div 的切换更替设想，我们定义两个大的div各分布在左右两边，左边的放控制标签，右边的div则随左边的事件而改变。意思就跟我们看的手册一样，左边是标题，右边是内容。好的，下面我来写一个简单的切换代码解析吧。 HTML内容 <!DOCTYPE html>...
复制链接

扫一扫