编程 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参数的小问题

Mar 02 Javascript

jQuery Div中加载其他页面的实现代码

Feb 27 Javascript

js获取元素在浏览器中的绝对位置

Jul 24 Javascript

JQuery+JS实现仿百度搜索结果中关键字变色效果

Aug 02 Javascript

jQuery UI Dialog 创建友好的弹出对话框实现代码

Apr 12 Javascript

javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板

Apr 27 Javascript

21个值得收藏的Javascript技巧

Feb 04 Javascript

jQuery 插件实现随机自由弹跳气泡样式

Jan 12 Javascript

JS数组求和的常用方法总结【5种方法】

Jan 14 Javascript

关于layui表单中按钮自动提交的解决方法

Sep 09 Javascript

vue下的@change事件的实现

Oct 25 Javascript

浅谈Three.js截图并下载的大坑

Nov 01 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在Web开发领域的优势

2006/10/09 PHP

PHP实现网上点歌（二）

2006/10/09 PHP

一个PHP针对数字的加密解密类

2014/03/20 PHP

PHP数组array类常见操作示例

2020/05/15 PHP

javascript OFFICE控件测试代码

2009/12/08 Javascript

菜鸟学习JavaScript小实验之函数引用

2010/11/17 Javascript

ECMAScript6的新特性箭头函数（Arrow Function）详细介绍

2014/06/07 Javascript

JSON格式化输出

2014/11/10 Javascript

js判断手机和pc端选择不同执行事件的方法

2015/01/30 Javascript

将JavaScript的jQuery库中表单转化为JSON对象的方法

2015/11/17 Javascript

第十篇BootStrap轮播插件使用详解

2016/06/21 Javascript

浅谈JavaScript的闭包函数

2016/12/08 Javascript

jQuery+ajax的资源回收处理机制分析

2017/01/07 Javascript

详解Angularjs 如何自定义Img的ng-load 事件

2017/02/15 Javascript

bootstrap table插件的分页与checkbox使用详解

2017/07/23 Javascript

AngularJS中table表格基本操作示例

2017/10/10 Javascript

基于better-scroll 实现歌词联动功能的代码

2020/05/07 Javascript

详解datagrid使用方法（重要）

2020/11/06 Javascript

微信小程序组件生命周期的踩坑记录

2021/03/03 Javascript

python 使用get_argument获取url query参数

2017/04/28 Python

有趣的python小程序分享

2017/12/05 Python

python实现扫描日志关键字的示例

2018/04/28 Python

Python3编码问题 Unicode utf-8 bytes互转方法

2018/10/26 Python

python3实现名片管理系统

2020/11/29 Python

selenium+PhantomJS爬取豆瓣读书

2019/08/26 Python

python实现通过队列完成进程间的多任务功能示例

2019/10/28 Python

使用Python来做一个屏幕录制工具的操作代码

2020/01/18 Python

pycharm中导入模块错误时提示Try to run this command from the system terminal

2020/03/26 Python

Django 实现将图片转为Base64,然后使用json传输

2020/03/27 Python

Pyspark读取parquet数据过程解析

2020/03/27 Python

Python中qutip用法示例详解

2020/10/02 Python

使用CSS3来制作消息提醒框

2015/07/12 HTML / CSS

CSS3自定义滚动条样式的示例代码

2017/08/21 HTML / CSS

初中地理教学反思

2016/02/19 职场文书

pytorch 如何使用amp进行混合精度训练

2021/05/24 Python

戴尔Win11系统no bootable devices found解决教程

2022/09/23 数码科技