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

基于jquery.Jcrop的头像编辑器

Mar 01 Javascript

浅谈被jQuery抛弃的函数及替代函数

May 03 Javascript

JavaScript中停止执行setInterval和setTimeout事件的方法

May 14 Javascript

Validform+layer实现漂亮的表单验证特效

Jan 17 Javascript

JavaScript中判断数据类型的方法总结

May 24 Javascript

超简单的Vue.js环境搭建教程

Mar 17 Javascript

node.js利用mongoose获取mongodb数据的格式化问题详解

Oct 06 Javascript

js拖动滑块和点击水波纹效果实例代码

Oct 16 Javascript

说说Vuex的getters属性的具体用法

Apr 15 Javascript

javascript实现函数柯里化与反柯里化过程解析

Oct 08 Javascript

jquery轻量级数字动画插件countUp.js使用详解

Oct 17 jQuery

JavaScript进制转换实现方法解析

Jan 18 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利用iframe实现无刷新文件上传功能的代码

2011/09/29 PHP

php空间不支持socket但支持curl时recaptcha的用法

2011/11/07 PHP

PHP中使用unset销毁变量并内存释放问题

2012/07/05 PHP

基于initPHP的框架介绍

2013/04/18 PHP

php设计模式之命令模式使用示例

2014/03/02 PHP

PHP连接MYSQL数据库实例代码

2016/01/20 PHP

JavaScript国旗变换效果代码

2008/08/13 Javascript

js 巧妙去除数组中的重复项

2010/01/25 Javascript

商城常用滚动的焦点图效果代码简单实用

2013/03/28 Javascript

多引号嵌套的变量命名的问题

2014/05/09 Javascript

JavaScript获取Url里的参数

2014/12/18 Javascript

举例讲解JavaScript substring()的使用方法

2015/11/09 Javascript

剖析Node.js异步编程中的回调与代码设计模式

2016/02/16 Javascript

JavaScript中校验银行卡号的实现代码

2016/12/19 Javascript

AngularJS打开页面隐藏显示表达式用法示例

2016/12/25 Javascript

回顾Javascript React基础

2019/06/15 Javascript

json 带斜杠时如何解析的实现

2019/08/12 Javascript

vue 自定义右键样式的实例代码

2019/11/06 Javascript

JavaScript实现模态对话框实例

2020/01/13 Javascript

浅谈javascript如何获取文件后缀名

2020/08/07 Javascript

Vue表单提交点击事件只允许点击一次的实例

2020/10/23 Javascript

如何构建一个Vue插件并生成npm包

2020/10/26 Javascript

利用Tkinter(python3.6)实现一个简单计算器

2017/12/21 Python

python+selenium识别验证码并登录的示例代码

2017/12/21 Python

快速解决pandas.read_csv()乱码的问题

2018/06/15 Python

python3学生名片管理v2.0版

2018/11/29 Python

python 使用xlsxwriter循环向excel中插入数据和图片的操作

2021/01/01 Python

匡威意大利官方商店：Converse意大利

2018/11/27 全球购物

护理不良事件检讨书

2014/02/06 职场文书

六五普法规划实施方案

2014/03/21 职场文书

环境卫生标语

2014/06/09 职场文书

手机被没收的检讨书

2014/10/04 职场文书

2014年管理人员工作总结

2014/12/01 职场文书

《蟋蟀的住宅》教学反思

2016/02/17 职场文书

委托书范本格式

2019/04/18 职场文书

Pytorch中TensorBoard及torchsummary的使用详解

2021/05/12 Python