编程 Javascript

JQuery切换显示的效果实例代码

Posted in Javascript onFebruary 27, 2013

JQuery真的太强大了，真好看！

Jquery代码如下：

 $(function () {
       $(".n_zyb_gzright .n_zyb_gzrightlist").hover(function () {
       $(this).find(".n_zyb_gzrightlistc").attr("style", "display:block").parent().siblings().find(".n_zyb_gzrightlistc").attr("style", "display:none");
    })
})

Html代码如下：

<div class="n_zyb_gzright">        
                            <div class="n_zyb_gzrightlist">
                                <a target="_blank" class="a1" href="/Media/PlayMedia/212.shtml" title="我们都能幸福着">
                                    我们都能幸福着</a> <a class="" href="javascript:void(0)">人气：<font>1</font></a>
                                <div class="clear">
                                </div>
                                <div style="display:block" class="n_zyb_gzrightlistc">
                                    <div class="index_zx_img_left">
                                        <a target="_blank" href="/User/ShowInfo/220">
                                            <img src="https://3water.com/Avatar/2012113010521695319512.gif"></a></div>
                                    <div class="n_zpcen_ti">
                                        <a target="_blank" href="/User/ShowInfo/220">jstu001</a><br>
                                        <a target="_blank" class="n_zpa" href="/User/ShowInfo/220">
                                            作品：<span>18</span></a>  </div>
                                    <div class="clear">
                                    </div>
                                </div>
                            </div>
                            <div class="n_zyb_gzrightlist">
                                <a target="_blank" class="a1" href="/Media/PlayMedia/232.shtml" title="开心就好了。">
                                    开心就好了。</a> <a class="" href="javascript:void(0)">人气：<font>1</font></a>
                                <div class="clear">
                                </div>
                                <div style="display:none" class="n_zyb_gzrightlistc">
                                    <div class="index_zx_img_left">
                                        <a target="_blank" href="/User/ShowInfo/221">
                                            <img src="https://3water.com/Avatar/2013011410552810013828.jpg"></a></div>
                                    <div class="n_zpcen_ti">
                                        <a target="_blank" href="/User/ShowInfo/221">jteacher001</a><br>
                                        <a target="_blank" class="n_zpa" href="/User/ShowInfo/221">
                                            作品：<span>12</span></a>  </div>
                                    <div class="clear">
                                    </div>
                                </div>
                            </div>
                            <div class="n_zyb_gzrightlist">
                                <a target="_blank" class="a1" href="/Media/PlayMedia/213.shtml" title="2131321">
</a> <a class="" href="javascript:void(0)">人气：<font>0</font></a>
                                <div class="clear">
                                </div>
                                <div style="display:none" class="n_zyb_gzrightlistc">
                                    <div class="index_zx_img_left">
                                        <a target="_blank" href="/User/ShowInfo/220">
                                            <img src="https://3water.com/Avatar/2012113010521695319512.gif"></a></div>
                                    <div class="n_zpcen_ti">
                                        <a target="_blank" href="/User/ShowInfo/220">jstu001</a><br>
                                        <a target="_blank" class="n_zpa" href="/User/ShowInfo/220">
                                            作品：<span>18</span></a>  </div>
                                    <div class="clear">
                                    </div>
                                </div>
                            </div>
                    </div>

JQuery切换显示的效果实例代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

让getElementsByName适应IE和firefox的方法

Sep 24 Javascript

关于jQuery参考实例2.0 用jQuery选择元素

Apr 07 Javascript

ajax提交表单实现网页无刷新注册示例

May 08 Javascript

JS 排序输出实现table行号自增前端动态生成的tr

Aug 13 Javascript

jQuery实现批量判断表单中文本框非空的方法(2种方法)

Dec 09 Javascript

jQuery对象与DOM对象转换方法详解

May 10 Javascript

JS与Ajax Get和Post在使用上的区别实例详解

Jun 08 Javascript

详解百度百科目录导航树小插件

Jan 08 Javascript

详解React 在服务端渲染的实现

Nov 16 Javascript

探索JavaScript中私有成员的相关知识

Jun 13 Javascript

vue 如何使用递归组件

Oct 23 Javascript

vue router返回到指定的路由的场景分析

Nov 10 Javascript

innerText和textContent对比及使用介绍

Feb 27 #Javascript

根据IP的地址，区分不同的地区，查看不同的网站页面的js代码

Feb 26 #Javascript

jQuery easyui datagrid动态查询数据实例讲解

Feb 26 #Javascript

jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)

Feb 26 #Javascript

jquery创建一个ajax关键词数据搜索实现思路

Feb 26 #Javascript

jQuery创建平滑的页面滚动(顶部或底部)

Feb 26 #Javascript

JavaScript建立一个语法高亮输入框实现思路

Feb 26 #Javascript

You might like

解析dedeCMS验证码的实现代码

2013/06/07 PHP

php实现的click captcha点击验证码类实例

2014/09/23 PHP

php实现遍历多维数组的方法

2015/11/25 PHP

PHP文件上传类实例详解

2016/04/08 PHP

PHP在弹框中获取foreach中遍历的id值并传递给地址栏

2017/06/13 PHP

PHP设计模式之命令模式示例详解

2020/12/20 PHP

datePicker——日期选择控件（with jquery）

2007/02/20 Javascript

写入cookie的JavaScript代码库 cookieLibrary.js

2009/10/24 Javascript

javascript深入理解js闭包

2010/07/03 Javascript

用js获取电脑信息(是使用与IE浏览器)

2013/01/15 Javascript

jquery操作select方法汇总

2015/02/05 Javascript

在JavaScript中使用开平方根的sqrt()方法

2015/06/15 Javascript

jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑

2016/11/29 Javascript

JavaScript数据结构之链表的实现

2017/03/19 Javascript

nodejs利用ajax实现网页无刷新上传图片实例代码

2017/06/06 NodeJs

Vue创建头部组件示例代码详解

2018/10/23 Javascript

webpack开发环境和生产环境的深入理解

2018/11/08 Javascript

使用Node.js写一个代码生成器的方法步骤

2019/05/10 Javascript

微信小程序的引导页实现代码

2020/06/24 Javascript

[01:33]PWL开团时刻DAY2-开雾与反开雾

2020/10/31 DOTA

[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18

2020/12/19 DOTA

Python转换HTML到Text纯文本的方法

2015/01/15 Python

python对html代码进行escape编码的方法

2015/05/04 Python

python实现各进制转换的总结大全

2017/06/18 Python

python里使用正则的findall函数的实例详解

2017/10/19 Python

Django 多对多字段的更新和插入数据实例

2020/03/31 Python

基于python纯函数实现井字棋游戏

2020/05/27 Python

阿玛瑞酒店中文官方网站：Amari.com

2018/02/13 全球购物

英国山地公路自行车商店：Tweeks Cycles

2018/03/16 全球购物

KIKO MILANO俄罗斯官网：意大利领先的化妆品和护肤品品牌

2021/01/09 全球购物

Java TransactionAPI (JTA) 主要包含几部分

2012/12/07 面试题

考博自荐信

2013/10/25 职场文书

模具毕业生推荐信

2014/02/15 职场文书

2014年宣传部工作总结

2014/11/12 职场文书

生日答谢词

2015/01/05 职场文书

Nginx使用ngx_http_upstream_module实现负载均衡功能示例

2022/08/05 Servers