Js 面向对象 动态添加标签页
[详细] -->
赞
踩
热门标签
热门文章
- 1Cocos2d-x 详解坐标系统_cocos2d setposition ccp
- 2探索未来云计算，华为云耀云服务器L实例引领行业新动力
- 3maven仓库repositories和mirrors的配置及区别_maven repositories
- 4Redis数据库学习笔记01--Redis数据库基本配置_3085redis-server
- 5python爬虫——selenium_python selenium
- 6解决SpringBoot集成分页插件pagehelper出现的循环依赖问题_springboot中pagehelper没有依赖项
- 7Js字符串操作函数大全_js instr
- 8云计算简介_云 csdn
- 9JS特效第144弹：audio古典的胶片音乐播放器代码
- 10理解数字化转型：3个阶段、2个分类和3类价值
当前位置: article > 正文
jquery tab标签切换（无炫效果，简单的显示隐藏）_jquery nav-tabs 动态隐藏
作者：weixin_40725706 | 2024-02-08 14:14:49
赞
踩
jquery nav-tabs 动态隐藏
从最简单的效果开始写起，一个简单的JQ写出tab切换效果，很静态，没有任何的轮转特效，单纯的点击标签显示区域块。
<div id="nav-all" class="nav-all" style="height: 25.625rem;display: block;"> <div id="nav-list"> <div class="nav-list"> <span>已为您精准找到</span> <span class="count">9</span> <span> 位 “<span class="count">企业名称</span>”的老板 </span> </div> </div> <div id="nav-information" class="nav-information"> <div class="lk_scrollBox w section"> <div class="lk_scrollInner"> <div class="lk_content"> <!-- <table border="0" cellpadding="0" cellspacing="0"> <tbody> --> <div id="tupu" class="clearfix tupu-public"> <div class="left tupu"> <div class="tupu-top"> <div class="clearfix"> <div class="left tupu-img"> <img src="img/tabBar/xinxi.png" alt=""> </div> <div class="left"> <p> <span>姓名</span> <span>xxx</span> </p> <p> <span>他有<span style="color: red;">52</span>家公司</span> </p> </div> </div> </div> <div class="tupu-btn"> <div class="clearfix"> <div class="left"> <p> <span>北京<span>22</span>家</span> </p> <p> <span>其他<span>22</span>家</span> </p> </div> <div class="right"> <p> <span>XXX..asdasd等</span> </p> <p> <span>XXX..等</span> </p> </div> </div> </div> </div> <div class="left tupu"> <div class="tupu-top"> <div class="clearfix"> <div class="left tupu-img"> <img src="img/tabBar/xinxi.png" alt=""> </div> <div class="left"> <p> <span>姓名</span> <span>xxx</span> </p> <p> <span>他有<span style="color: red;">52</span>家公司</span> </p> </div> </div> </div> <div class="tupu-btn"> <div class="clearfix"> <div class="left"> <p> <span>北京<span>22</span>家</span> </p> <p> <span>其他<span>22</span>家</span> </p> </div> <div class="right"> <p> <span>XXX..asdasd等</span> </p> <p> <span>XXX..等</span> </p> </div> </div> </div> </div> <div class="left tupu"> <div class="tupu-top"> <div class="clearfix"> <div class="left tupu-img"> <img src="img/tabBar/xinxi.png" alt=""> </div> <div class="left"> <p> <span>姓名</span> <span>xxx</span> </p> <p> <span>他有<span style="color: red;">52</span>家公司</span> </p> </div> </div> </div> <div class="tupu-btn"> <div class="clearfix"> <div class="left"> <p> <span>北京<span>22</span>家</span> </p> <p> <span>其他<span>22</span>家</span> </p> </div> <div class="right"> <p> <span>XXX..asdasd等</span> </p> <p> <span>XXX..等</span> </p> </div> </div> </div> </div> </div> <!-- </tbody></table> --> </div> </div> <div class="lk_scrollbar"> <div class="lk_begin"></div> <div class="lk_handle" style="width: 30px; left: 0px;"></div> <div class="lk_end"></div> </div> </div> </div> <!-- --> <div id="nav-list1"> <div class="nav-list"> <span>已为您精准找到</span> <span class="count">20</span> <span>个项目品牌、投资机构 </span> </div> </div> <div id="nav-information1" class="nav-information"> <div class="lk_scrollBox w section"> <div class="lk_scrollInner"> <div class="lk_content"> <!-- <table border="0" cellpadding="0" cellspacing="0"> <tbody> --> <div id="tupu1" class="clearfix tupu-public"> <div class="left tupu"> <div class="tupu-top"> <div class=""> 项目品牌、投资机构 </div> </div> <div class="tupu-btn"> <div class="clearfix"> <div class="left"> <div class="tupu-btn-img"> <img src="img/tabBar/xinxi.png" alt=""> </div> </div> <div class="left"> <p> <span>融资轮次:<span>22</span></span> </p> <p> <span>竞品数量:<span>22</span></span> </p> </div> </div> </div> </div> <div class="left tupu"> <div class="tupu-top"> <div class=""> 项目品牌、投资机构 </div> </div> <div class="tupu-btn"> <div class="clearfix"> <div class="left"> <div class="tupu-btn-img"> <img src="img/tabBar/xinxi.png" alt=""> </div> </div> <div class="left"> <p> <span>融资轮次:<span>22</span></span> </p> <p> <span>竞品数量:<span>22</span></span> </p> </div> </div> </div> </div> <div class="left tupu"> <div class="tupu-top"> <div class=""> 项目品牌、投资机构 </div> </div> <div class="tupu-btn"> <div class="clearfix"> <div class="left"> <div class="tupu-btn-img"> <img src="img/tabBar/xinxi.png" alt=""> </div> </div> <div class="left"> <p> <span>融资轮次:<span>22</span></span> </p> <p> <span>竞品数量:<span>22</span></span> </p> </div> </div> </div> </div> </div> <!-- </tbody></table> --> </div> </div> <div class="lk_scrollbar"> <div class="lk_begin"></div> <div class="lk_handle" style="width: 30px; left: 0px;"></div> <div class="lk_end"></div> </div> </div> </div> </div> <!-- 按行业 --> <div id="According" class="nav-all" style="height: 25.625rem;text-align: center;line-height:25.625rem;display: none;"> 选项卡二内容 </div> <!-- 按行业 --> <div id="shuaxuan" class="nav-all" style="height: 25.625rem;text-align: center;line-height:25.625rem;display: none;"> 选项卡三内容 </div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
简单js
$('.nav ul li').click(function(event) {
$(this).addClass('active');
$(this).siblings().removeClass('active');
$(".nav-all").hide().eq($(".nav ul li").index(this)).show();
})
- 1
- 2
- 3
- 4
- 5
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/69390
推荐阅读
Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。
