编程 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 相关文章推荐

javascript编程起步（第二课）

Jan 10 Javascript

javaScript Array（数组）相关方法简述

Jul 25 Javascript

学习ExtJS Window常用方法

Oct 07 Javascript

网页右键ie不支持event.preventDefault和event.returnValue （需要加window）

Feb 22 Javascript

javascript实现下班倒计时效果的方法(可桌面通知)

Jul 10 Javascript

JS+CSS实现带小三角指引的滑动门效果

Sep 22 Javascript

javascript的replace方法结合正则使用实例总结

Jun 16 Javascript

微信小程序 swiper组件详解及实例代码

Oct 25 Javascript

Node.js中sequelize时区的配置方法

Dec 10 Javascript

H5+C3+JS实现五子棋游戏（AI篇）

May 28 Javascript

JS实现简单的表格增删

Jan 16 Javascript

基于better-scroll 实现歌词联动功能的代码

May 07 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

PHP学习变量使用总结

2011/03/24 PHP

destoon实现调用自增数字从1开始的方法

2014/08/21 PHP

Javascript document.referrer判断访客来源网址

2020/05/15 Javascript

自己用jQuery写了一个图片的马赛克消失效果

2014/05/04 Javascript

js中的如何定位固定层的位置

2014/06/15 Javascript

基于jquery实现的文字向上跑动类似跑马灯的效果

2014/06/17 Javascript

Vue.js实现一个自定义分页组件vue-paginaiton

2016/09/05 Javascript

jQuery ajax MD5实现用户注册即时验证功能

2016/10/11 Javascript

jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法

2016/10/14 Javascript

VueJs与ReactJS和AngularJS的异同点

2016/12/12 Javascript

浅谈React的最大亮点之虚拟DOM

2018/05/29 Javascript

微信小程序scroll-view实现滚动穿透和阻止滚动的方法

2018/08/20 Javascript

详解Webpack loader 之 file-loader

2018/11/07 Javascript

[49:54]Ti4 循环赛第三日 LGD vs Titan

2014/07/12 DOTA

[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T

2018/03/30 DOTA

Python遍历指定文件及文件夹的方法

2015/05/09 Python

Python实现Sqlite将字段当做索引进行查询的方法

2016/07/21 Python

Django 如何获取前端发送的头文件详解（推荐）

2017/08/15 Python

Python实现简单网页图片抓取完整代码实例

2017/12/15 Python

python+opencv+caffe+摄像头做目标检测的实例代码

2018/08/03 Python

python 3.3 下载固定链接文件并保存的方法

2018/12/18 Python

详解重置Django migration的常见方式

2019/02/15 Python

python自动保存百度盘资源到百度盘中的实例代码

2019/08/26 Python

Django视图扩展类知识点详解

2019/10/25 Python

原来我一直安装 Python 库的姿势都不对呀

2019/11/11 Python

PyTorch学习:动态图和静态图的例子

2020/01/06 Python

Python虚拟环境的创建和包下载过程分析

2020/06/19 Python

Python 中 sorted 如何自定义比较逻辑

2021/02/02 Python

html5 postMessage前端跨域并前端监听的方法示例

2018/11/01 HTML / CSS

欧洲最古老的鞋厂：Peter Kaiser

2019/11/05 全球购物

Linux面试经常问的文件系统操作命令

2015/11/05 面试题

自荐信要包含哪些内容

2013/11/06 职场文书

个人对照检查材料

2014/02/12 职场文书

群众路线党课主持词

2014/04/01 职场文书

入党积极分子批评与自我批评思想汇报

2014/09/14 职场文书

家庭教育教师培训学习体会

2016/01/14 职场文书