tab栏切换

// 新品首发板块的导航栏换块
		var login_right_one_bs=document.querySelectorAll('.login_right_one_b');
		var login_lis=document.querySelectorAll('.login_li');
		for(var i=0;i<login_lis.length;i++){
			login_lis[i].setAttribute('counts',i);
			login_lis[i].onmousemove=function(){
				for(var i=0;i<login_lis.length;i++){
					login_lis[i].className='';
				}
				this.className='login_li';
			var counts=this.getAttribute('counts');
			for(var i=0;i<login_right_one_bs.length;i++){
				login_right_one_bs[i].style.display='none';
			}
			login_right_one_bs[counts].style.display='block';
			}
		}

上面的为京东页面的新品首发模块的tab栏切换功能代码。

它的实现原理主要为利用自定义属性链接上面的tab(一般运用ul li结构来写）和下面相对应板块的内容块，运用排他思想，进而实现效果。

                            <div class="login_right_one_m">
								<ul id="login_right">
									<li class="login_li" counts="0">换个新机</li>
									<li class="login_li" counts="1">新机妙算</li>
									<li class="login_li" counts="2">手机控</li>
								</ul>
							</div>

至于后面的板块内容可以根据自己需要自己写，这只是个模板。

注意点：注意获取标签时的方法，不要写错了；

用setAttribute时设置的为自定义属性，可以根据自己需要设置，建议尽量使用index count

下一阶段我将学习更多的这些小案列分享给大家，同时将开始完善自己的知识点，希望下次k可以x写得更好！