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 相关文章推荐
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
JavaScript中的运算符种类及其规则介绍
Sep 26 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
从vue源码看props的用法
Jan 09 Javascript
vuex vue简单使用知识点总结
Aug 29 Javascript
vue+Element-ui前端实现分页效果
Nov 15 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企业级应用之常见缓存技术篇
2011/01/27 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
PHP7变量处理机制修改
2021/03/09 PHP
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
jquery 提示信息显示后自动消失的具体实现
2013/12/18 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
js的各种排序算法实现(总结)
2016/07/23 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
通过vue-cli3构建一个SSR应用程序的方法
2018/09/13 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
国际象棋商店:The Chess Store
2018/07/09 全球购物
通用C#笔试题附答案
2016/11/26 面试题
药学专业大学生个人的自我评价
2013/11/04 职场文书
小学教师岗位职责
2013/11/25 职场文书
自荐信需注意事项
2014/01/25 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
《水乡歌》教学反思
2014/04/24 职场文书
环境整治工作方案
2014/05/18 职场文书
分公司任命书
2014/06/06 职场文书
关于诚信的活动方案
2014/08/18 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技
Windows server 2016服务器基本设置
2022/08/14 Servers