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 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
JS实现页面打印功能
Mar 16 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
JS实现小球的弹性碰撞效果
Nov 11 Javascript
原生JS无缝滑动轮播图
Oct 22 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 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内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
js与jquery获取input输入框中的值实例讲解
2020/02/27 jQuery
开源Web应用框架Django图文教程
2017/03/09 Python
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
通俗讲解python 装饰器
2020/09/07 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
Otel.com:折扣酒店预订
2017/08/24 全球购物
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
幼儿园国庆节活动方案
2014/02/01 职场文书
安全生产实施方案
2014/02/23 职场文书
中秋节主持词
2014/04/02 职场文书
班级学习计划书
2014/04/27 职场文书
党员承诺书怎么写
2014/05/20 职场文书
青奥会口号
2014/06/12 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
浅谈如何保证Mysql主从一致
2022/03/13 MySQL
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL