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()); ...

随机推荐

【blade利刃出鞘】一起进入移动端webapp开发吧
前言在移动浪潮袭来的时候,小钗有幸进入框架组做webapp框架开发,过程中遇到了移动端的各种坑,也产生了各种激情,就我们公司的发展历程来说第一阶段:使用传统方式开发移动站点,少量引入HTML5元素 ...
git命令查看远程分支
使用git remote -v命令可以查看本地设置好的所有远程仓库地址. ➜ learn-vue git:(master) git remote -v origin https://github.co ...
AngularJS HTML DOM& 事件
AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性 <div ng-app= ...
Squirrel：通用SQL、NoSQL客户端
安装配置数据库配置驱动配置连接如果你的工作中,需要使用到多个数据库,又不想在多种客户端之间切换来切换去.那么就需要找一款支持多数据库的客户端工具了.如果你要连接多个关系型数据库,你就可以使用N ...
auto_clipboard
黄山松发表于博客园:http://www.cnblogs.com/tomview/p/6137179.html #ifndef __HSS_AUTO_CLIPBOARD_HSS__#define __ ...
Web.xml配置详解
(转自:http://www.cnblogs.com/chinafine/archive/2010/09/02/1815980.html) 1 定义头和根元素部署描述符文件就像所有XML文件一样,必 ...
ubuntu安装pppoeconf后与networkmanager冲突
使用pppoeconf拨号后,Network Manager显示设备未托管的解决办法: 在终端中输入以下命令,来配置网络连接管理文件: sudo gedit /etc/NetworkManager/n ...
Ubuntu16.04 LTS下apt安装WireShark
Ubuntu16.04 LTS下apt安装WireShark 安装与配置首先通过apt安装WireShark: $ sudo apt install wireshark 会同时安装许多的依赖包,其中 ...
BenUtils组件和DbUtils组件
BenUtils组件和DbUtils组件 [TOC] 1.BenUtils组件 1.1.简介程序中对javabean的操作很频繁,所有Apache提供了一套开源api,方便javabean的操作!即 ...
Salesforce Apex 使用JSON数据的示例程序
本文介绍了一个在Salesforce Apex中使用JSON数据的示例程序, 该示例程序由以下几部分组成: 1) Album.cls, 定了了封装相关字段的数据Model类 2) RestClient ...

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

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

随机推荐

热门专题