原生js写tab栏切换 |
您所在的位置：网站首页 › js实现页面切换 › 原生js写tab栏切换 |
原生js写tab栏切换
|
经典tab栏切换案例
基础样式html模块： 商品介绍 规格与包装 售后保障 商品评价 手机社区 商品介绍模块内容 规格与包装模块内容 售后保障模块内容 商品评价模块内容 手机社区模块内容基础样式css模块： * { margin: 0; padding: 0; } li { list-style-type: none; } .tab { width: 978px; margin: 100px auto; } .tab_list { height: 39px; border: 1px solid #ccc; background-color: #f1f1f1; } .tab_list li { float: left; height: 39px; line-height: 39px; padding: 0 20px; text-align: center; cursor: pointer; } .tab_list .current { background-color: #c81623; color: #fff; } .item_info { padding: 20px 0 0 20px; } .item { display: none; }结构图片： 要求：通过点击小li切换li的样式和对应div内容的显示与隐藏 难点：需要用到两次排他思想，先移除所有类再添加需要的类 上js代码： var lis = document.querySelectorAll('li'); var items = document.querySelectorAll('.item') for (var i = 0; i < lis.length; i++) { lis[i].setAttribute('data-index', i) lis[i].onclick = function () { for (var i = 0; i < lis.length; i++) { lis[i].className = '' } this.className = 'current' var index = this.getAttribute('data-index') for (var j = 0; j < items.length; j++) { items[j].style.display = 'none' } items[index].style.display = 'block' } }以上的js代码更容易看懂，基于以上代码可做一次优化，代码如下： var lis = document.querySelectorAll('li'); var items = document.querySelectorAll('.item') for (var i = 0; i < lis.length; i++) { // 1.给每一个标题li添加自定义属性 lis[i].index = i // 2.绑定事件 lis[i].onclick = function () { for (var i = 0; i < lis.length; i++) { lis[i].classList.remove('current') items[i].style.display = 'none' } this.classList.add('current') var index = this.index items[index].style.display = 'block' } }总结：本题难点主要是围绕元素排它、删除与添加、div对应的显示与隐藏； 如何通过li的下标找到对应div块，对其进行操作，就是精华所在。 |
【本文地址】
今日新闻 |
推荐新闻 |