文档章节

实现同一网页DIV自由切换

徐小明d
 徐小明d
发布于 2017/04/27 23:10
字数 331
阅读 5
收藏 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
470
0
求大神指点 HTML tab切换

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

stableman
2014/03/24
2.4K
6
好玩儿 的 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
网页按钮使用div还是button的争议,以及button样式的正确写法

使用div的好处是:一般做网页人都进行大量div使用,对div的效果已经了如执掌了。不好处是:语义化差,不能享受浏览器的自带效果(如Tab键切换)。 使用button的好是:语义化好,有浏览器的自...

linsk1998
10/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

详解css BEM书写规范

BEM是基于组件的web开发方法。其思想是将用户界面分隔为独立的块,从而使开发复杂的UI界面变得更简单和快,且不需要粘贴复制便可复用现有代码。BEM由Block、Element、Modifier组成。选择器里...

前端小攻略
5分钟前
0
0
一个centos初始化脚本

概述 就是自己无聊写的一个脚本,欢迎使用,star,fork顺便关注我一波 https://github.com/bboysoulcn/centos 使用方法 这个是给最小化安装的centos使用的,在centos 7.5上测试过,当然其他的...

bboysoulcn
9分钟前
0
0
mybatis 自动维护 createdAt, updatedAt

SpringBoot Mybatis Plus公共字段自动填充功能

youngjdong
12分钟前
0
0
Docker之nginx容器中部署静态文件

注: Docker版本如下: Client: Version:17.12.0-ce API version:1.35 Go version:go1.9.2 Git commit:c97c6d6 Built:Wed Dec 27 20:11:19 2017 OS/Arch:linux/amd64Ser......

克虏伯
13分钟前
0
0
搭建git服务器————gitlab

github毕竟是公开的,而私有仓库又得花钱买。所以我们可以想办法搭建一个私有的,只自己公司使用的。Gitlab是个不错的选择。在介绍它之前,先讲述一下命令行的git服务器 找一台服务器,首先要...

chencheng-linux
20分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部