2021-06-28

标题JS实现导航栏切换

我们在逛淘宝时打开某个商品的下面有很多信息模块：如图所示

逻辑思路很简单就是当我点击当前商品模块按钮时，给商品介绍这个按钮添加一个类，其它按钮设置类为空并且商品介绍模块就会显示出来其它模块隐藏。

如上所示这是HTML的代码

最后让我来讲解一下代码的逻辑：
1.首先我把所有的li标签都获取到，再获取到所有类为nr的div ,然后用一个for循环
2.lis[i].setAttribute(“idx”,i);给每个li标签设置一个属性名为“idx” ,属性值就根据索引值递增，然后给每个 li标签添加点击事件， 当我点击某个li标签的时候首先执行的代码是用一个for循环把所有的的li标签的类去除，然后我点击的这个按钮的类添加类为“change”这就是经典的排他思想。
3.我命名一个index去接收我所点击的按钮的属性值，然后再利用for循环把每一个我获取到类为 nr的div设置为隐藏然后把我点击按钮对因的模块显示出来这样就完成了tap栏的切换。