请选择 进入手机版 | 继续访问电脑版

12360技术网 - 专业IT技术发表平台

 立即注册  找回密码
查看: 2062|回复: 3

jQuery实现Tab选项卡

[复制链接]

26

主题

35

帖子

277

积分

中级会员

Rank: 3Rank: 3

积分
277
发表于 2020-1-27 15:15:22 | 显示全部楼层 |阅读模式
  1.         Title                    * {            margin: 0;            padding: 0;        }        #tab {            list-style: none;            display: block;            width: 400px;            height: 50px;            margin: 0 auto;        }        #tab li {            width: 100px;            height: 50px;            background-color: #ccc;            float: left;            text-align: center;            line-height: 50px;        }        #img li:nth-child(n+2) {/*正数第二个开始*/            display: none;        }        #img {            width: 400px;            height: 200px;            display: block;            margin: 0 auto;            list-style: none;        }        #img li img {            width: 400px;            height: 200px;        }   
  2. [list]   
  3. [*]一   
  4. [*]二   
  5. [*]三   
  6. [*]四
  7. [/list]
  8. [list]   
  9. [*][align=center][img]http://www.12360.co/../../../img/1.jpg[/img][/align]   
  10. [*][align=center][img]http://www.12360.co/../../../img/2.jpg[/img][/align]   
  11. [*][align=center][img]http://www.12360.co/../../../img/3.jpg[/img][/align]   
  12. [*][align=center][img]http://www.12360.co/../../../img/4.jpg[/img][/align]
  13. [/list]
复制代码
知识点:
  1. :nth-child(n+2) {/*正数第二个开始*/            display: none;        }
复制代码
  1. :nth-child(-n+2) {/*倒数第二个开始*/        }
复制代码
  1. let $img = $('ul:last>li>img').eq(idx);//获取与上面li对应index的图片            $img.parent().show();//图片的父级li显示            $img.parent().siblings().hide();//li的兄弟元素隐藏(因为图片在li内,所以单单一个img标签没有兄弟元素可选择)
复制代码
效果展示:

                                                                                                                                       
                                                    
  • 点赞                        
  • 收藏                        
  • 分享                                                                                                                        
  •                                                         
                                      
    • 文章举报                           
                                                
                                                                        
                                            
                                                        Hello Hongbin                                                                发布了21 篇原创文章 · 获赞 5 · 访问量 1110                                                                                            私信                                                            关注
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x




上一篇:如何用HTML写一个网站
下一篇:TypeScript基础(五):TS Vue 项目安装,装饰器的作用、原理和实现,TS 在
回复

使用道具 举报

0

主题

11

帖子

241

积分

中级会员

Rank: 3Rank: 3

积分
241
发表于 2020-1-28 18:22:53 | 显示全部楼层
楼主,大恩不言谢了![www.12360.co]
回复

使用道具 举报

0

主题

15

帖子

325

积分

中级会员

Rank: 3Rank: 3

积分
325
发表于 2020-2-7 06:17:50 | 显示全部楼层
既然你诚信诚意的推荐了,那我就勉为其难的看看吧![www.12360.co]
回复

使用道具 举报

0

主题

13

帖子

283

积分

中级会员

Rank: 3Rank: 3

积分
283
发表于 4 分钟前 | 显示全部楼层
这东西我收了!谢谢楼主![www.12360.co]
回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

12360技术网

GMT+8, 2020-2-22 11:13 , Processed in 0.139635 second(s), 41 queries .

本网站内容收集于互联网,Www.12360.Co不承担任何由于内容的合法性及健康性所引起的争议和法律责任。 欢迎大家对网站内容侵犯版权等不合法和不健康行为进行监督和举报。

© 2019-2020 Www.12360.Co

快速回复 返回顶部 返回列表