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

动态调用CSS文件的JS代码

Jul 29 Javascript

使用AJAX实现Web页面进度条的实例分享

May 06 Javascript

javascript入门之string对象【新手必看】

Nov 22 Javascript

jquery实现放大镜简洁代码(推荐)

Jun 08 jQuery

JS中使用media实现响应式布局

Aug 04 Javascript

vue项目使用微信公众号支付总结及遇到的坑

Oct 23 Javascript

vue 实现路由跳转时更改页面title

Nov 05 Javascript

微信小程序跨页面传递data数据方法解析

Dec 13 Javascript

使用webpack/gulp构建TypeScript项目的方法示例

Dec 18 Javascript

JavaScript实现串行请求的示例代码

Sep 14 Javascript

VUE+Element实现增删改查的示例源码

Nov 23 Vue.js

JavaScript实现点击切换功能

Jan 27 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中PDO的错误处理

2011/09/04 PHP

php中ltrim()、rtrim()与trim()删除字符空格实例

2014/11/25 PHP

PHP计算百度地图两个GPS坐标之间距离的方法

2015/01/09 PHP

php文件上传后端处理小技巧

2016/05/22 PHP

PHP实现的Redis多库选择功能单例类

2017/07/27 PHP

PHP使用ActiveMQ实例

2018/02/05 PHP

laravel框架使用FormRequest进行表单验证，验证异常返回JSON操作示例

2020/02/18 PHP

ModelDialog JavaScript模态对话框类代码

2011/04/17 Javascript

读jQuery之八包装事件对象

2011/06/21 Javascript

JS 获取浏览器和屏幕宽高等信息的实现思路及代码

2013/07/31 Javascript

JQuery中的html()、text()、val()区别示例介绍

2014/09/01 Javascript

jQuery团购倒计时特效实现方法

2015/05/07 Javascript

node.js读取文件到字符串的方法

2015/06/29 Javascript

jQuery热气球动画半透明背景的后台登录界面代码分享

2015/08/28 Javascript

JavaScript实现短暂提示框功能

2018/04/04 Javascript

Vue.js中对css的操作（修改）具体方式详解

2018/10/30 Javascript

微信小程序授权登录解决方案的代码实例（含未通过授权解决方案）

2019/05/10 Javascript

vue集成chart.js的实现方法

2019/08/20 Javascript

ElementUI之Message功能拓展详解

2019/10/18 Javascript

vue项目中使用eslint+prettier规范与检查代码的方法

2020/01/16 Javascript

django1.8使用表单上传文件的实现方法

2016/11/04 Python

Python第三方库xlrd/xlwt的安装与读写Excel表格

2017/01/21 Python

Python实现获取磁盘剩余空间的2种方法

2017/06/07 Python

python selenium firefox使用详解

2019/02/26 Python

python实现AES加密解密

2019/03/28 Python

Python函数中的可变长参数详解

2019/09/12 Python

Tensorflow读取并输出已保存模型的权重数值方式

2020/01/04 Python

html5中地理位置定位api接口开发应用小结

2013/01/04 HTML / CSS

护理专业毕业生自荐信范文

2014/01/05 职场文书

个人对照检查材料思想汇报

2014/09/26 职场文书

科技活动周标语

2014/10/08 职场文书

2015年营销工作总结范文

2015/04/23 职场文书

医院合作意向书范本

2015/05/08 职场文书

导游词之海南-南湾猴岛

2019/10/12 职场文书

销区经理年终述职报告模板

2019/11/28 职场文书

Vue3.0 手写放大镜效果

2021/07/25 Vue.js