实现方式1:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
      <script src = 'jquery-1.9.1.js'></script>
    
    <script language="javascript" type="text/javascript">
    $(document).ready(function(){
            $('#subBannerFirst').click(function(){
                $('#subConFirst').css('display','block');
                $('#subConSecond').css('display','none');
                $('#subConThird').css('display','none');
            });
        });

$(document).ready(function(){
            $('#subBannerSecond').click(function(){
                $('#subConFirst').css('display','none');
                $('#subConSecond').css('display','block');
                $('#subConThird').css('display','none');
            });
        });
        $(document).ready(function(){
            $('#subBannerThird').click(function(){
                $('#subConFirst').css('display','none');
                $('#subConSecond').css('display','none');
                $('#subConThird').css('display','block');
            });
        });
   
  </script>
    
    <!--script src = 'libs/SuperMap_Cloud.js'></script-->
</head>
<body>

<div id='myBannerList' style ='width:100%;height:20px;'>
                <div id='subBannerFirst' href='#subConFirst'  style='width: 50px;height: 20px;float:left;background-color:#1e3a4f;'>第一项</div>
                <div id='subBannerSecond' href='#subConSecond' style='width: 50px;height: 20px;float:left;background-color:red;'>第二项</div>
                <div id='subBannerThird' href='#subConThird' style='width: 50px;height: 20px;float:left;background-color:blue;'>第三项</div>
            </div>
            <div id='banContent'  style ='width:100%;height:150px;float:left;'>
                <div id='subConFirst' style ='width:100%;height:150px;display:block;background-color:#1e3a4f;float:left;'></div>
                <div id='subConSecond' style ='width:100%;height:150px;display:none;background-color:red;float:left;'></div>
                <div id='subConThird' style ='width:100%;height:150px;display:none;background-color:blue;float:left;'></div>
           </div>

</body>
</html>

实现方式2:

js代码:

//选择隐藏或者显示Banner下的DIV块方法
function changeConFirst() {
$('#subConFirst').css('display', 'block');
$('#subConSecond').css('display', 'none');
$('#subConThird').css('display', 'none');
} function changeConSecond() {
$('#subConFirst').css('display', 'none');
$('#subConSecond').css('display', 'block');
$('#subConThird').css('display', 'none');
} function changeConThird(){
$('#subConFirst').css('display','none');
$('#subConSecond').css('display','none');
$('#subConThird').css('display','block');
}

html代码
<div id='myBannerList' style ='width:100%;height:20px;'>
<div id='subBannerFirst' href='#subConFirst' onclick='changeConFirst()' style='width: 50px;height: 20px;float:left;cursor:pointer'>第一项</div>
<div id='subBannerSecond' href='#subConSecond' onclick='changeConSecond()' style='width: 50px;height: 20px;float:left;cursor:pointer'>第二项</div>
<div id='subBannerThird' href='#subConThird' onclick='changeConThird()' style='width: 50px;height: 20px;float:left;cursor:pointer'>第三项</div>
</div>
<div id='banContent' style ='width:100%;height:150px;float:left;'>
<div id='subConFirst' style ='width:100%;height:150px;display:block;float:left;'></div>
<div id='subConSecond' style ='width:100%;height:150px;display:none;float:left;'></div>
<div id='subConThird' style ='width:100%;height:150px;display:none;float:left;'></div>
</div> 实现方式1和2其实没区别,function的定义方式不一样而已。方式一是纯jquery,第二种是定义js的函数声明。 还有第三种实现方式:利用jquery的 show(),hiden()方法,这里不再记录。
												

Banner中利用Jquery隐藏显示下方DIV块的更多相关文章

  1. 彻底抛弃PeopleEditor,SharePoint中利用Jquery Chosen创建新的人员选择器

    彻底抛弃PeopleEditor,SharePoint中利用Jquery Chosen创建新的人员选择器 基于SharePoint平台开发时,人员选择器使用频率是非常高的,但是原生的人员选择器使用太麻 ...

  2. C#中利用JQuery实现视频网站

    C#中利用JQuery实现视频网站的缩略图采集   最近有朋友想要采集优酷的视频标题和缩略图 (哈哈, 并非商业目的). 找到我帮忙, 考虑到有我刚刚发布的SpiderStudio, 我毫不犹豫的答应 ...

  3. 子div块中设置margin-top时影响父div块位置的解决办法

    在css中设置样式时,通常会遇到用子div块margin中设置margin-top时,父div块中就会随着子div的margin-top,也会和子div执行相同的margin-top的位置样式 解决办 ...

  4. 子div块中设置margin-top时影响父div块位置的解决办法及其原因

    解决办法①: 若子DIV块中使用margin-top,则在父DIV块中添加:overflow:hidden; 解决办法②: 在子DIV块中用padding-top代替margin-top. 有个叫 b ...

  5. 解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题

    此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的 ...

  6. 前端(jQuery)(4)-- jQuery隐藏显示与淡入淡出、滑动、回调

    1.隐藏与显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  7. JQuery隐藏显示详情功能

    放置两个DIV:初始DIV :在Repetr绑定设置文字隐藏(三元运算符):'<%# Eval("字段2").ToString().Length>11?Eval(&qu ...

  8. C#中利用JQuery实现视频网站的缩略图采集

    最近有朋友想要采集优酷的视频标题和缩略图 (哈哈, 并非商业目的). 找到我帮忙, 考虑到有我刚刚发布的SpiderStudio, 我毫不犹豫的答应了. 首先在网页上视频的基本结构为: div.v - ...

  9. ie6中利用jquery居中

    1.利用jquery居中代码 <script type="text/javascript"> $hwidth=parseInt($(window).width()); ...

随机推荐

  1. SVNKit支持SSH连接

    SVNKit这个开源工具,用于Java语言访问SVN库,咋看的时候很方便,其实坑特别多.我在这里只想跟大家说一句,如果你还没有用过,请不要在生产环境使用这个东西了,兼容性问题搞死你(替换方案是直接用s ...

  2. 新手入门JUnit单元测试

    首先将JUnit插件安装到Eclipse或myeclipse里面,编写完一个模块或者实体类的时候,直接右击,new一个JUnit项目,选择你想测试的实体类(模块),然后会自动生成一个类,这个类,我们将 ...

  3. DevOps的基本原则与介绍

    DevOps的基本原则与介绍       DevOps这个术语是developer与operations的合并简写.实现还有QA.DevOps描述与精简软件交付流程,在今天已经开始广泛的使用.强调从生 ...

  4. webuploader上传文件,图片

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.官方地址:http://fex.baidu.com/webupload ...

  5. java接口调用——webservice就是一个RPC而已

    很多新手一听到接口就蒙逼,不知道接口是什么!其实接口就是RPC,通过远程访问别的程序提供的方法,然后获得该方法执行的接口,而不需要在本地执行该方法.就是本地方法调用的升级版而已,我明天会上一篇如何通过 ...

  6. .NET RESTful Web Services入门

    很早之前看到过RESTful Web Services,并未在意,也没找相关资料进行学习.今天偶尔有一机会,就找了点资料进行研究,发现RESTful真是“简约而不简单”.下面用示例来说明: 1 项目结 ...

  7. 灵活的JavaScript(一)

    自己对JavaScript的原型,继承,闭包,多少也还是了解些,但是平时写的东西都挺简单的,也用不上,所以感觉提升不大.于是乎买了一本<JavaScript设计模式>来提高下自己,这本是百 ...

  8. 有主线程发送message给子线程

    通常我们在处理耗时任务时候都会通过新建线程来处理,当任务处理完后通过Handler将结果发送回主线程.比如下面示例: package com.example.testlistener; import ...

  9. 仿喜马拉雅实现ListView添加头布局和脚布局

     ListView添加头布局和脚布局 之前学习喜马拉雅的时候做的一个小Demo,贴出来,供大家学习参考: 如果我们当前的页面有多个接口.多种布局的话,我们一般的选择无非就是1.多布局:2.各种复杂滑动 ...

  10. Android Volley

    1.volley简单的介绍: Volley是一个HTTP库,使Android应用程序变得更加容易,最重要的是,网络 得更快. Vollry 提供以下好处: 1.自动调度的网络请求. 2.多个并发的网络 ...