文档章节

实现同一网页DIV自由切换

徐小明d
 徐小明d
发布于 2017/04/27 23:10
字数 331
阅读 4
收藏 0

在同一个页面实现不同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 class="body-home">

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

                   <ul  type="none">
                            <li onclick="changeBody(1)">博客1</li>
                            <li onclick="changeBody(2)">博客2</li>
                   </ul> 

              </div>

             

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

                    <div>
                        <h2 class="mod_most">博客专栏</h2>
                    </div>

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

function changeBody(index)
{
    switch (index) {
        case 1:
        {
            document.getElementById('contentmenu1').style.display = "";
            document.getElementById('contentmenu2').style.display = "none";
            break;
        }
        case 2:
        {   
            document.getElementById('contentmenu1').style.display = "none";
            document.getElementById('contentmenu2').style.display = "block";
            break;
        }
    }
}

 

© 著作权归作者所有

共有 人打赏支持
徐小明d
粉丝 0
博文 27
码字总数 9746
作品 0
南昌
进程/线程模型2

五、深入理解进程概念 5.1 进程的分类 1、系统进程/用户进程 这里系统进程的优先级要高 2、前台进程/后台进程 用户一般只和前台进程交互。 3、密集型进程/密集型进程 5.2 进程层次结构 中是一...

芥末无疆sss
2017/12/29
0
0
VS2008(C#)制作网页Tab标签切换方法(四)

VS2008(C#)制作网页Tab标签切换方法(四)——IFrame实现 利用HTML的iframe属性,并结合后台的CS代码实现,具体做法如下: 前台HTML代码: <%@ Page Language="C#" AutoEventWireup="true" ...

长平狐
2013/01/06
464
0
求大神指点 HTML tab切换

想在一个网页上实现多个tab标签页,点击即可切换,试了无数次都无法实现想要的效果,谷歌搜了N多,改了不下百次,还是没找到原因,求指点,不甚感激! 想要实现的效果:四个tab标签页,默认显...

stableman
2014/03/24
2.4K
6
巧用CSS的RevealTrans滤镜

作者: 冯永曜 矩形从大至小 0 随机溶解 12 矩形从小至大 1 从上下向中间展开 13 圆形从大至小 2 从中间向上下展开 14 圆形从小至大 3 从两边向中间展开 15 向上推开 4 从中间向两边展开 16...

晨曦之光
2012/03/09
180
0
好玩儿 的 javascript

非常平滑的JS图片滚动特效代码,无缝循环 http://www.codefans.net/jscss/code/255.shtml 强烈推荐的一款CSS导航菜单 http://www.codefans.net/jscss/code/768.shtml 纯CSS下拉菜单代码http:...

曦羽
2017/10/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

获取多个集合列表的笛卡尔积

获取多个集合笛卡尔积 电商中典型业务场景:商品搜索 单属性属性值之间为并查询 不同属性的属性值之间查询为与查询 import java.util.ArrayList;import java.util.List;/** * Created w...

键走偏锋
20分钟前
0
0
echarts 迁移地图 控制鼠标缩放大小比例

在网上找了好久没有找到解决方式,还是重新看了一下文档,终于找到的解决方案, zoom:1, //默认显示级别 scaleLimit:{min:1,max:3}, // 缩放级别 echarts 文档-配置项链接 http://echarts.b...

心驰
24分钟前
0
0
Boot2Docker ISO is out-of-date,

Boot2Docker ISO is out-of-date, downloading the latest release. 使用docker-machine时无法更新Boot2Docker ISO导致创建vm machine失败 解决方法:关闭网络,创建好之后再开启...

writeademo
32分钟前
0
0
在 Tomcat 中设置 Tapestry 框架的 html 热加载

如果开发中使用到了 Tapestry 这个框架,如果事先没有设置过的话,开发的时候 html 是不会热加载的,也就是说修改了 html 文件,不能刷新浏览器后立马看到修改完的效果,必须先重新启动应用服...

LeoXu
53分钟前
0
0
【微服务】开启巨石应用到微服务的探索

背景 在过去的一年时间里,我一直在从事一件事情,将现有的单体应用(巨石应用)向微服务改造。 接下来,将持续整理一些在微服务路上的学习与成长。 为什么要做微服务 单体应用,开发、部署简...

艳沐石
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部