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

简单JS代码压缩器

Oct 12 Javascript

jquery分页插件AmSetPager(自写)

Apr 15 Javascript

js jquery获取随机生成id的服务器控件的三种方法

Jul 11 Javascript

js的2种继承方式详解

Mar 04 Javascript

JS上传图片前实现图片预览效果的方法

Mar 02 Javascript

javascript解三阶幻方（九宫格）

Apr 22 Javascript

jquery计算鼠标和指定元素之间距离的方法

Jun 26 Javascript

js禁止浏览器的回退事件

Apr 20 Javascript

详解axios 全攻略之基本介绍与使用（GET 与 POST）

Sep 15 Javascript

vue父组件向子组件动态传值的两种方法

Nov 11 Javascript

swiper在angularjs中使用循环轮播失效的解决方法

Sep 27 Javascript

微信小程序五子棋游戏AI实现方法【附demo源码下载】

Feb 20 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获取当前网址url并替换参数或网址的方法

2010/06/06 PHP

开启CURL扩展，让服务器支持PHP curl函数(远程采集)

2011/03/19 PHP

PHP连接局域网MYSQL数据库的简单实例

2013/08/26 PHP

php创建无限级树型菜单

2015/11/05 PHP

PHP安装BCMath扩展的方法

2019/02/13 PHP

PHP数组与字符串互相转换实例

2020/05/05 PHP

php实现JWT验证的实例教程

2020/11/26 PHP

jquery 清空file域示例(兼容个浏览器)

2013/10/11 Javascript

中文输入法不触发onkeyup事件的解决办法

2014/07/09 Javascript

JavaScript版的TwoQueues缓存模型

2014/12/29 Javascript

JavaScript学习笔记之JS函数

2015/01/22 Javascript

js简单实现调整网页字体大小的方法

2016/07/23 Javascript

jquery uploadify如何取消已上传成功文件

2017/02/08 Javascript

JS与jQuery实现子窗口获取父窗口元素值的方法

2017/04/17 jQuery

JS/jquery实现一个网页内同时调用多个倒计时的方法

2017/04/27 jQuery

妙用缓存调用链实现JS方法的重载

2018/04/30 Javascript

js与jQuery实现获取table中的数据并拼成json字符串操作示例

2018/07/12 jQuery

如何将HTML字符转换为DOM节点并动态添加到文档中详解

2018/08/19 Javascript

微信小程序上线发布流程图文详解

2019/05/06 Javascript

Vue CLI3基础学习之pages构建多页应用

2019/06/02 Javascript

JavaScript 实现自己的安卓手机自动化工具脚本(推荐)

2020/05/13 Javascript

使用PyInstaller将Python程序文件转换为可执行程序文件

2016/07/08 Python

python下setuptools的安装详解及No module named setuptools的解决方法

2017/07/06 Python

tensorflow识别自己手写数字

2018/03/14 Python

解决Matplotlib图表不能在Pycharm中显示的问题

2018/05/24 Python

Python定时任务工具之APScheduler使用方式

2019/07/24 Python

玛蒂尔达简服装：Matilda Jane Clothing

2019/02/13 全球购物

什么是属性访问器

2015/10/26 面试题

客户代表实习人员自我鉴定

2013/09/27 职场文书

业绩考核岗位职责

2014/02/01 职场文书

承诺书范文

2014/06/03 职场文书

汽车销售经理岗位职责

2014/06/09 职场文书

研究生导师推荐信

2015/03/25 职场文书

2016年国庆节67周年活动总结

2016/04/01 职场文书

Go语言设计模式之结构型模式

2021/06/22 Golang

mysql数据库隔离级别详解

2022/06/16 MySQL