想实现这个功能,就要找到他们的连接点,我用的是下标
先布局,在实现功能
默认显示内容一和选中标题一 js部分需要先引入jQuery,在给标题添加点击事件,然后点击对应的标题用siblings()方法判断是否有.title-hover 没有就添加。然后获取点击的下标,在用eq(idx)和siblings() 判断该内容是否有content-hover,没有就添加。然后就完了这是我用js写的最简单的根据标题来显示对应的内容。当然也可以升级,你可以里面animate()来实现切换出现动画效果。你也可以把他改成左右结构。当然你也可以多次使用.box这个模块,但是这样js部分需要改动一下。
只需要把$(".content div")换成这个就行了。因为毕竟你多复制几个.box这个模块,他们的所有class都相同,你就需要利用this来改变父子级就可以了。说下自我感受:代码这个东西很神奇,当你写的越多,懂的越多,即使有些你没有去做过,然后去做你就会把你脑内的代码组合起来实现你想做的。
网友评论