实现方式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. 
						
  2. C#中利用JQuery实现视频网站
		
    C#中利用JQuery实现视频网站的缩略图采集   最近有朋友想要采集优酷的视频标题和缩略图 (哈哈, 并非商业目的). 找到我帮忙, 考虑到有我刚刚发布的SpiderStudio, 我毫不犹豫的答应 ...
    
		
    3. 
						
  3. 子div块中设置margin-top时影响父div块位置的解决办法
		
    在css中设置样式时,通常会遇到用子div块margin中设置margin-top时,父div块中就会随着子div的margin-top,也会和子div执行相同的margin-top的位置样式 解决办 ...
    
		
    4. 
						
  4. 子div块中设置margin-top时影响父div块位置的解决办法及其原因
		
    解决办法①: 若子DIV块中使用margin-top,则在父DIV块中添加:overflow:hidden; 解决办法②: 在子DIV块中用padding-top代替margin-top. 有个叫 b ...
    
		
    5. 
						
  5. 解决JQuery中datatables设置隐藏显示列多次提交后台刷新数据的问题
		
    此次项目开发过程中用到了Jquery的Datatables插件,无疑他是数据列表展示,解决MVC中同步过程中先走控制器后返回视图,查询数据过程中无法提示等待的弊端, 而且他所提供的各种方法也都有较强的 ...
    
		
    6. 
						
  6. 前端（jQuery）（4）-- jQuery隐藏显示与淡入淡出、滑动、回调
		
    1.隐藏与显示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
    
		
    7. 
						
  7. JQuery隐藏显示详情功能
		
    放置两个DIV:初始DIV :在Repetr绑定设置文字隐藏(三元运算符):'<%# Eval("字段2").ToString().Length>11?Eval(&qu ...
    
		
    8. 
						
  8. C#中利用JQuery实现视频网站的缩略图采集
		
    最近有朋友想要采集优酷的视频标题和缩略图 (哈哈, 并非商业目的). 找到我帮忙, 考虑到有我刚刚发布的SpiderStudio, 我毫不犹豫的答应了. 首先在网页上视频的基本结构为: div.v - ...
    
		
    9. 
						
  9. ie6中利用jquery居中
		
    1.利用jquery居中代码 <script type="text/javascript"> $hwidth=parseInt($(window).width());  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. activiti工作流的web流程设计器整合视频教程 SSM和独立部署
			
    本视频为activiti工作流的web流程设计器整合视频教程 整合Acitiviti在线流程设计器(Activiti-Modeler 5.21.0 官方流程设计器) 本视频共讲了两种整合方式 1. 流 ...
    
			
    2. 
						
  2. 在一个项目各个子模块中使用Maven的一些通用的准则
			
    1.各个子模块都应该使用相同的groupId(如:com.mvnbook.account); 2.各个子模块如果一起开发和发布,还应该使用相同的版本:version: 3.各个子模块还应该使用一致的前 ...
    
			
    3. 
						
  3. quartz CronExpression表达式
			
    一个cron表达式有至少6个(也可能7个)有空格分隔的时间元素.按顺序依次为1.秒(0~59)2.分钟(0~59)3.小时(0~23)4.天(月)(0~31,但是你需要考虑你月的天数)5.月(0~11 ...
    
			
    4. 
						
  4. 商业智能BI推动制造业智能化转型
			
    制造业是我国国民经济的支柱产业,是我国经济增长的主导部门和经济转型的基础,如今我国制造业面临技术工艺不精.缺乏市场意识.商贸流通环节多.物流成本大.仓储效率低下等问题,正处在转型的特殊时期. 内忧:  ...
    
			
    5. 
						
  5. ActionBar设置自定义setCustomView()留有空白的问题
			
    先来看问题,当我使用ActionBar的时候,设置setCustomView时,会留有空白的处理 网上很多朋友说可以修改V7包到19,结果处理的效果也是不理想的. 下面贴出我觉得靠谱的处理代码 pub ...
    
			
    6. 
						
  6. appfuse:Excel导出
			
    1.pom.xml <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi< ...
    
			
    7. 
						
  7. JavaScript如何获取网页url中的参数
			
    我们可以自定义一个公共函数来实现网页url中的参数获取,返回的是一个数组 GetUrlRequest: function () { var url = decodeURI(location.searc ...
    
			
    8. 
						
  8. 【msql】关于redo 和 undo log
			
    InnoDB 有两块非常重要的日志,一个是undo log,另外一个是redo log,前者用来保证事务的原子性以及InnoDB的MVCC,后者用来保证事务的持久性.和大多数关系型数据库一样,Inno ...
    
			
    9. 
						
  9. WPF 自定义窗口关闭按钮
			
    关闭图标设计主要涉及主要知识点: 1.Path,通过Path来画线.当然一般水平.竖直也是可以用Rectangle/Border之类的替代 一些简单的线条图标用Path来做,还是很方便的. 2.简单的 ...
    
			
    10. 
						
  10. Linux学习笔记(17) Shell编程之基础
			
    1. 正则表达式 (1) 正则表达式用来在文件中匹配符合条件的字符串,正则是包含匹配.grep.awk.sed等命令可以支持正则表达式:通配符用来匹配符合条件的文件名,通配符是完全匹配.ls.find ...
    
			
    11.