编程 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 的继承

Oct 01 Javascript

使用js对select动态添加和删除OPTION示例代码

Aug 12 Javascript

IE6中链接A的href为javascript协议时不在当前页面跳转

Jun 05 Javascript

js+html5实现canvas绘制简单矩形的方法

Jun 05 Javascript

Node.js编写爬虫的基本思路及抓取百度图片的实例分享

Mar 12 Javascript

Node.js实现文件上传

Jul 05 Javascript

正则表达式基本语法及表单验证操作详解【基于JS】

Apr 07 Javascript

浅谈关于axios和session的一些事

Jul 13 Javascript

详解在vue-cli3.0中自定css、js和图片的打包路径

Aug 26 Javascript

element中的$confirm的使用

Apr 26 Javascript

js实现小球在页面规定的区域运动

Jun 16 Javascript

ES2020系列之空值合并运算符 '??'

Jul 22 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

解析posix与perl标准的正则表达式区别

2013/06/17 PHP

php实现zip压缩文件解压缩代码分享（简单易懂）

2014/05/10 PHP

PHP的APC模块实现上传进度条

2015/10/27 PHP

php中this关键字用法分析

2016/12/07 PHP

PHP基于curl post实现发送url及相关中文乱码问题解决方法

2017/11/25 PHP

在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码

2007/04/20 Javascript

几个比较实用的JavaScript 测试及效验工具

2010/04/18 Javascript

JS获取月的最后一天与JS得到一个月份最大天数的实例代码

2013/12/16 Javascript

JS实现的网页背景闪电闪烁效果代码

2015/10/17 Javascript

AngularJS入门教程之链接与图片模板详解

2016/08/19 Javascript

ie下js不执行的几种可能

2017/02/28 Javascript

js轮播图透明度切换（带上下页和底部圆点切换）

2017/04/27 Javascript

通过示例彻底搞懂js闭包

2017/08/10 Javascript

JavaScript中运算符规则和隐式类型转换示例详解

2017/09/06 Javascript

vue-cli如何引入bootstrap工具的方法

2017/10/19 Javascript

VUE路由动态加载实例代码讲解

2019/08/26 Javascript

js中位数不足自动补位扩展padLeft、padRight实现代码

2020/04/06 Javascript

js实现鼠标滑动到某个div禁止滚动

2020/09/17 Javascript

antd多选下拉框一行展示的实现方式

2020/10/31 Javascript

Django与JS交互的示例代码

2017/08/23 Python

Python中装饰器高级用法详解

2017/12/25 Python

python将字符串以utf-8格式保存在txt文件中的方法

2018/10/30 Python

Python实现二维曲线拟合的方法

2018/12/29 Python

ubuntu 16.04下python版本切换的方法

2019/06/14 Python

python实现将视频按帧读取到自定义目录

2019/12/10 Python

pymongo insert_many 批量插入的实例

2020/12/05 Python

CSS3实现3D翻书效果

2016/06/20 HTML / CSS

欧缇丽英国官方网站：Caudalie英国

2016/08/17 全球购物

英国羊绒服装购物网站：Pure Collection

2018/10/22 全球购物

骨干教师培训感言

2014/01/16 职场文书

服装店营销方案

2014/03/10 职场文书

2015年入党决心书

2015/02/05 职场文书

假如给我三天光明：舟逆水而行，人遇挫而达

2019/10/29 职场文书

《和时间赛跑》读后感3篇

2019/12/16 职场文书

Python图像处理之图像拼接

2021/04/28 Python

Python查找算法的实现（线性、二分，分块、插值查找算法)

2022/04/24 Python