Banner中利用Jquery隐藏显示下方DIV块

实现方式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>

    
</head>
<body>

</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块的更多相关文章

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

随机推荐

CSS3新特性应用之字体排印
一.插入换行 ~:表示同辈元素之后指定类型的元素,如;elm1 ~ elm2表示,elm1之后的所有elm2元素,且elm1与elm2都是在同一个父级元素. +:表示同辈元素的兄弟元素. \A:一个空 ...
Spring in Action 学习笔记三-AOP
面向切面的Spring 2015年10月9日 11:30 屏幕剪辑的捕获时间: 2015-10-9 14:30 屏幕剪辑的捕获时间: 2015-10-9 ...
UIBezierPath-完善曲线
override func draw(_ rect: CGRect) { let path = UIBezierPath() // 起点 path.move(to: CGPoint(x: , y: ) ...
ios native工程集成react-native的demo
react-native看到了给现有工程添加react-native环境的时候碰到一个问题: 如何往工程中添加 package.json文件,以及node_modules是怎么来的? 我开始的时候以为 ...
SVN为什么比Git更好
首先我表明一个根本的立场,我个人更喜欢用Git,但是,这仅仅是一个个人偏好.当我们需要将一种技术方案带给整个团队的时候,并不是由我们的个人偏好作为主要决定因素,而应该充分去权衡利弊,选择对团队,对公司 ...
Mac OS X中bogon的处理
起因最近写一个项目,之前在eclipse里的tomcat启动是没问题的,最近不知怎么了,启动的时候ehcache会报一个错误,说java.net.UnknownHostException: bogo ...
Hadoop集群的启动顺序
1.启动zookeeper集群对于hadoop,使用Zookeeper的事件处理确保整个集群只有一个活跃的NameNode,存储配置信息,对于HBase,使用Zookeeper的事件处理确保整个集群 ...
Hadoop技巧（02）：时间同步
阅读目录序时间同步系列索引本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序在实际部署 ...
spring3系列一
IOC基础 Ioc是什么 Ioc--Inversion of Control 控制反转,不是什么技术,而是一种设计思想.在java开发中,ioc意味着将你设计好的对象交给容器控制,而不是传统的在你的对 ...
Entity Framework关于SQL注入安全问题
1.EF生成的sql语句,用 parameter 进行传值,所以不会有sql注入问题 2.EF下有涉及外部输入参数传值的,禁止使用EF直接执行sql命令方式,使用实体 SQL 参考: https: ...

Banner中利用Jquery隐藏显示下方DIV块

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

随机推荐

热门专题