文档章节

实现同一网页DIV自由切换

徐小明d
 徐小明d
发布于 2017/04/27 23:10
字数 331
阅读 3
收藏 0
点赞 0
评论 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

VS2008(C#)制作网页Tab标签切换方法(四)

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

长平狐 ⋅ 2013/01/06 ⋅ 0

求大神指点 HTML tab切换

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

stableman ⋅ 2014/03/24 ⋅ 6

巧用CSS的RevealTrans滤镜

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

晨曦之光 ⋅ 2012/03/09 ⋅ 0

懒加载——网页图片的加载技术

目前,网络上各大论坛,尤其是一些图片类型的网站上,在图片加载时,均采用一种称为懒加载的方式。具体表现为:当页面被请求时,只加载可视区域的图片,其他部分图片则不加载,只有这些图片出...

Reya滴水心 ⋅ 2015/11/09 ⋅ 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

CSS从大图中抠取小图完整教程(background-position应用)

相信很多喜欢研究网页界面的童鞋都遇到过一个奇妙的现象:网页中很多图片素材被合成在一张图片上。 起初小菜模仿网站的时候,经常遇到这个现象,那时候也不知道这时什么技术,人家的整张图片...

靐鑫森淼焱垚 ⋅ 2015/08/09 ⋅ 0

几行代码为自己的网站添加划词翻译功能

为网站添加自动翻译网页、网页划词、在线翻译、在线词典、每日一句功能。  适合各类网站  百变语种,自动翻译网页   把中文的网站,变成十几种不同语种的网站,会不会感觉很新奇? 要实...

crossmix ⋅ 2015/04/26 ⋅ 1

Drupal 7 国际化和多语言网站的建立

Drupal 是一个自由的国度,其跨语言的发布能力自然不会有问题。今天我们看一下Drupal 7当前的现状。 在Drupal 7之前的版本中,国际化是通过一系列特定的模块组合来实现的,这些模块被统称为I...

芒果龙 ⋅ 2011/10/19 ⋅ 1

web前端开发中浏览器兼容问题(一)

浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。通俗的讲,就是使用不同的浏览器(Firefox、Chrome、IE6...

博为峰教研组 ⋅ 2016/11/28 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

win环境下jdk7与jdk8共存配置

1.jdk安装包 jdk安装包 安装步骤略 2.jdk等配置文件修改 在安装JDK1.8时(本机先安装jdk1.7再安装的jdk1.8),会将java.exe、javaw.exe、javaws.exe三个文件copy到了C:\Windows\System32,这...

泉天下 ⋅ 16分钟前 ⋅ 0

windows profesional 2017 build problem

.net framework .... https://stackoverflow.com/questions/43330915/could-not-load-file-or-assembly-microsoft-build-frameworkvs-2017...

机油战士 ⋅ 50分钟前 ⋅ 0

python3中报错的解决方法(长期更新)

1、ImportError: No module named ‘DjangoUeditor’ 出错原因:安装DjangoUeditor库适用于python2,需要下载适用python3的 下载地址:https://github.com/twz915/DjangoUeditor3 2、python3......

xiaoge2016 ⋅ 55分钟前 ⋅ 0

数据结构与算法之双向链表

一、双向链表 1.双向链表的结点结构 typedef struct DualNode{ ElemType data; struct DualNode *prior; // 前驱结点 struct DualNode *next; // 后继结点}DualNode, *DuL...

aibinxiao ⋅ 今天 ⋅ 0

五大最核心的大数据技术

大数据技术有5个核心部分,数据采集、数据存储、数据清洗、数据挖掘、数据可视化。关于这5个部分,有哪些核心技术?这些技术有哪些潜在价值?看完今天的文章就知道了。 大数据学习群:7165810...

董黎明 ⋅ 今天 ⋅ 0

PhpStorm 头部注释、类注释和函数注释的设置

首先,PhpStorm中文件、类、函数等注释的设置在:setting-》Editor-》FIle and Code Template-》Includes下设置即可,其中方法的默认是这样的: /**${PARAM_DOC}#if (${TYPE_HINT} != "v...

nsns ⋅ 今天 ⋅ 0

spring.net AOP

http://www.springframework.net/doc-latest/reference/html/aop-quickstart.html https://www.cnblogs.com/wujy/archive/2013/04/06/3003120.html AOP系列(一)——ProxyFactoryObject 显式创......

whoisliang ⋅ 今天 ⋅ 0

【HAVENT原创】创建 Dockerfile 生成新的镜像,并发布到 DockerHub

注意:Win7 与 Win10 的版本存在差异,Win7 版本使用 Docker Quickstart Terminal 进入控制台,Win10下面直接用管理员权限打开控制台或者 PowerShell 即可;另外 Win7 下面只能访问 C盘,/ap...

HAVENT ⋅ 今天 ⋅ 0

pom.xml出现web.xml is missing ...解决方案

提示信息应该能看懂。也就是缺少了web.xml文件,<failOnMissingWebXml>被设置成true了。 搜索了一下,Stack Overflow上的答案解决了问题,分享一下。 目前被顶次数最多的回答原文如下: This...

源哥L ⋅ 今天 ⋅ 0

js时间戳与日期格式之间相互转换

1. 将时间戳转换成日期格式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 // 简单的一句代码 var date = new Date(时间戳); //获取一个时间对象 /** 1. 下面是获取时间日期的方法,需要什么样的格式自己...

Jack088 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部