文档章节

实现同一网页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
求大神指点 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
VS2008(C#)制作网页Tab标签切换方法(四)

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

长平狐
2013/01/06
464
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

没有更多内容

加载失败,请刷新页面

加载更多

分布式块存储的引擎如何设计?

前言: 目前在万兆网络和SSD,包括NVMe SSD 都已经非常普及。随着硬件的速度越来越快,性能的瓶颈会从硬件转移到软件。尤其对于存储引擎来说,性能至关重要。 先来看一下我们会对数据存储引擎...

Java干货分享
24分钟前
1
0
docker(五):docker-compose.yml 配置

docker-compose.yml常用命令 image 指定镜像名称或者镜像id,如果该镜像在本地不存在,Compose会尝试pull下来。 示例: image: java build 指定Dockerfile文件的路径。可以是一个路径,例如...

开心的哈士奇
28分钟前
1
0
Tale的升级真是惊心动魄,吓死人

精心动魄的博客升级计划,Tale 这几天在筹划将分散在其他几个地方的博客统一到这里来,也就留意了tale的更新,发现出现了2.0.1版本; 因此动了升级的念头,唉! 高估了个人开放着的系统规划能...

硅步积千里
39分钟前
1
0
tcc分布式事物

因为最近公司的新退货系统用到了spring cloud。所以会涉及到一些分布式事物。 所以需要先了解一下,分布式事物。 shuaiqiyu / hmily 高性能异步分布式事务TCC框架 谭纳 / spring-cloud-rest-...

miaojiangmin
39分钟前
1
0
20181016 上课截图

小丑鱼00
45分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部