编程 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中判断数字\字母\中文的正则表达式 (实例)

Jun 29 Javascript

setTimeout和setInterval的深入理解

Nov 08 Javascript

JavaScript 32位整型无符号操作示例

Dec 08 Javascript

JS+CSS实现的经典tab选项卡效果代码

Sep 16 Javascript

Bootstrap学习笔记之进度条、媒体对象实例详解

Mar 09 Javascript

react-native组件中NavigatorIOS和ListView结合使用的方法

Sep 30 Javascript

详解Webpack+Babel+React开发环境的搭建的方法步骤

Jan 09 Javascript

spring+angular实现导出excel的实现代码

Feb 27 Javascript

详解Vue+ElementUI从零开始搭建自己的网站（一、环境搭建）

Apr 30 Javascript

Node.js中console.log()输出彩色字体的方法示例

Dec 01 Javascript

TypeScript 引用资源文件后提示找不到的异常处理技巧

Jul 15 Javascript

JavaScript实现多层颜色选项卡嵌套

Sep 21 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 insert语法详解

2008/06/07 PHP

一个PHP分页类的代码

2011/05/18 PHP

php中将汉字转换成拼音的函数代码

2012/09/08 PHP

深入PHP中慎用双等于(==)的详解

2013/06/06 PHP

PHP中iconv函数转码时截断字符问题的解决方法

2015/01/21 PHP

详解ThinkPHP3.2.3验证码显示、刷新、校验

2016/12/29 PHP

关于query Javascript CSS Selector engine

2013/04/12 Javascript

jquery中文乱码的多种解决方法

2013/06/21 Javascript

JavaScript声明变量时为什么要加var关键字

2014/09/29 Javascript

jQuery插件ajaxfileupload.js实现上传文件

2020/10/23 Javascript

JS产生随机数的几个用法详解

2016/06/22 Javascript

原生js实现tab选项卡切换

2020/03/23 Javascript

使用live-server快速搭建本地服务器+自动刷新的方法

2018/03/09 Javascript

vue translate peoject实现在线翻译功能【新手必看】

2018/06/07 Javascript

Vue常见面试题整理【值得收藏】

2018/09/20 Javascript

详解vue配置后台接口方式

2019/03/29 Javascript

vue+egg+jwt实现登录验证的示例代码

2019/05/18 Javascript

vue 数据操作相关总结

2020/12/17 Vue.js

vue 项目@change多个参数传值多个事件的操作

2021/01/29 Vue.js

python使用epoll实现服务端的方法

2018/10/16 Python

Python实现常见的回文字符串算法

2018/11/14 Python

Pyqt5 基本界面组件之inputDialog的使用

2019/06/25 Python

详解Pandas之容易让人混淆的行选择和列选择

2019/07/10 Python

python3.7+selenium模拟淘宝登录功能的实现

2020/05/26 Python

Selenium自动化测试工具使用方法汇总

2020/06/12 Python

Python应用实现双指数函数及拟合代码实例

2020/06/19 Python

html5中canvas学习笔记2-判断浏览器是否支持canvas

2013/01/06 HTML / CSS

95%的面试官都会问到的50道Java线程题，附答案

2012/08/03 面试题

电大物流学生的自我评价

2013/10/25 职场文书

警察思想汇报

2014/01/04 职场文书

校园十大歌手策划书

2014/02/01 职场文书

基层党员对照检查材料

2014/08/25 职场文书

南京大屠杀观后感

2015/06/02 职场文书

创业计划书之面包店

2019/09/17 职场文书

如何使用php生成zip压缩包

2021/04/21 PHP

PostgreSQL聚合函数介绍以及分组和排序

2022/04/12 PostgreSQL