jquery手风琴
2019-09-10 22:29
183 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Steve_Richard/article/details/100715203
jquery实现tab切换
$(function () { $('.nav li').each(function (x) { $(this).addClass('active').siblings().removeClass(); $('.content div').eq(x).show().siblings().hide() }) })
jquery手风琴
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * {padding: 0;margin: 0;} .box {width: 900px;height: 300px;} .box1,.box2,.box3,.box4 {float: left;position: relative;} .a,.b,.c,.d {position: absolute;top: 0;left: 0;width: 100px;height: 300px;} .bg {background-color: #000;opacity: 0.3;} p {width: 20px;height: 300px;display: inline-block;color: #fff;position: absolute;top: 0;left: 15px;opacity: 1;} .two {left: 53px;} img {width: 100px;height: 300px;} .show {width: 600px;} </style> <script src="../jquery-3.4.1.min.js"></script> </head> <body> <div class="box"> <div class="box1"> <div class="a w bg"> <p>作者:默默的墨墨</p> <p class="two">我的个人拉萨之旅故事之城</p> </div> <img src="images/u=1081344387,1785290410&fm=26&gp=0.jpg" alt="" class="show"> </div> <div class="box2"> <div class="b w"> <p>作者:默默的墨墨</p> <p class="two">我的个人拉萨之旅故事之城</p> </div> <img src="images/u=1348707900,559674524&fm=26&gp=0.jpg" alt=""> </div> <div class="box3"> <div class="c w"> <p>作者:默默的墨墨</p> <p class="two">我的个人拉萨之旅故事之城</p> </div> <img src="images/u=1407589226,1345601442&fm=26&gp=0.jpg" alt=""> </div> <div class="box4"> <div class="d w"> <p>作者:默默的墨墨</p> <p class="two">我的个人拉萨之旅故事之城</p> </div> <img src="images/u=1686059205,404217172&fm=26&gp=0.jpg" alt=""> </div> </div> <script> $(function(){ $('.w').each(function(x){ $(this).click(function(){ $('.box').find('img').each(function(){ $(this).removeClass() }) $(this).parent().parent().find('img').eq(x).toggleClass('show') $('.box').find('.w').each(function(){ $(this).removeClass('bg') }) $(this).toggleClass('bg') }) }) }) </script> </body> </html>
相关文章推荐
- 精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
- 精心挑选的12款优秀 jQuery 手风琴效果插件和教程
- 使用jQuery创建简单的手风琴菜单
- 基于jQuery开发的手风琴插件 jquery.accordion.js
- 三行jquery实现手风琴效果
- JQuery手风琴效果
- 基于JQuery的一句话搞定手风琴菜单
- jQuery制作的手风琴折叠菜单
- jQuery自制手风琴效果增强版(附实现原理)
- 一款基于jquery的手风琴显示详情
- jQuery多级手风琴菜单实例讲解
- jquery实现侧边栏手风琴三级导航菜单demo
- jquery之手风琴
- jQuery实现的简单手风琴效果示例
- 基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
- 【JQuery】jQuery自制简易手风琴效果(附实现原理)
- 基于Jquery代码实现手风琴菜单
- jQuery图片手风琴特效一行代码搞定
- jquery应用实例分享_实现手风琴特效
- 垂直手风琴5级菜单!用js+jquery动态加载菜单,附上源码hezhu和注释