编程 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 判断页面元素是否存在的代码

Aug 14 Javascript

Javascript JSQL，SQL无处不在，

May 05 Javascript

来自国外的30个基于jquery的Web下拉菜单

Jun 22 Javascript

jQuery移动和复制dom节点实用DOM操作案例

Dec 17 Javascript

详解AngularJs中$resource和restfu服务端数据交互

Sep 21 Javascript

javascript实现文字无缝滚动

Dec 27 Javascript

JavaScript判断浏览器及其版本信息

Jan 20 Javascript

AngularJS的ng-click传参的方法

Jun 19 Javascript

vue一步步实现alert功能

Jul 05 Javascript

微信小程序使用audio组件播放音乐功能示例【附源码下载】

Dec 08 Javascript

uni-app微信小程序登录并使用vuex存储登录状态的思路详解

Nov 04 Javascript

Vue+ElementUI使用vue-pdf实现预览功能

Nov 26 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

Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源

2014/06/22 PHP

ThinkPHP框架表单验证操作方法

2017/07/19 PHP

Underscore.js 的模板功能介绍与应用

2012/12/24 Javascript

关于JQuery($.load)事件的用法和分析

2013/04/09 Javascript

Extjs单独定义各组件的实例代码

2013/06/25 Javascript

JS 添加千分位与去掉千分位的示例

2013/07/11 Javascript

深入理解JavaScript系列（30）：设计模式之外观模式详解

2015/03/03 Javascript

简介JavaScript中POSITIVE_INFINITY值的使用

2015/06/05 Javascript

详解JavaScript节流函数中的Throttle

2016/07/16 Javascript

JavaScript循环_动力节点Java学院整理

2017/06/28 Javascript

vue项目国际化vue-i18n的安装使用教程

2018/03/14 Javascript

小程序实现自定义导航栏适配完美版

2019/04/02 Javascript

小程序绑定用户方案优化小结

2019/05/15 Javascript

一个超级简单的python web程序

2014/09/11 Python

使用Python中的greenlet包实现并发编程的入门教程

2015/04/16 Python

11月编程语言排行榜 Python逆袭C#上升到第4

2017/11/15 Python

Python3计算三角形的面积代码

2017/12/18 Python

python skimage 连通性区域检测方法

2018/06/21 Python

Django添加KindEditor富文本编辑器的使用

2018/10/24 Python

python 发送和接收ActiveMQ消息的实例

2019/01/30 Python

python正则-re的用法详解

2019/07/28 Python

Python 私有化操作实例分析

2019/11/21 Python

Numpy之将矩阵拉成向量的实例

2019/11/30 Python

Python requests模块cookie实例解析

2020/04/14 Python

Pycharm连接远程服务器过程图解

2020/04/30 Python

详解numpy.ndarray.reshape()函数的参数问题

2020/10/13 Python

电子商务专业个人的自我评价

2013/11/19 职场文书

食品安全责任书

2014/04/15 职场文书

文明礼貌演讲稿

2014/05/12 职场文书

学校安全管理责任书

2014/07/23 职场文书

2014年党的群众路线学习心得体会

2014/11/05 职场文书

少先队辅导员事迹材料

2014/12/24 职场文书

2015年医院护理部工作总结

2015/04/23 职场文书

2016年公司新年寄语

2015/08/17 职场文书

远程教育学习心得体会

2016/01/23 职场文书

USB TYPE-C 或将成为所有智能手机充电标准

2022/04/21 数码科技