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>
Javascript 相关文章推荐
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
Nov 18 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
Jan 19 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
js querySelector() 使用方法
Dec 21 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
vue监听dom大小改变案例
Jul 29 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环境中Memcache的安装和使用
2015/11/05 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
windows系统下Python环境搭建教程
2017/03/28 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
python爬虫爬取网页表格数据
2018/03/07 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
Python turtle库的画笔控制说明
2020/06/28 Python
css3 transform属性详解
2014/09/30 HTML / CSS
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
Python面试题集
2012/03/08 面试题
大学生护理专业自荐信
2013/10/03 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
诚信承诺书
2015/01/19 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL
Vue的过滤器你真了解吗
2022/02/24 Vue.js