这个就是导航栏切换案例，分析html结构就是将导航栏的全部东西封装到一个大盒子里面，这个大盒子里面有上下两个小盒子，上面的小盒子装的是导航栏的内容，使用的是ul>li的结构，下面的小盒子就是每一个的导航栏详细内容，所以上面的导航栏li和下面的div数量是一一对应的，数量是相等的，第一步骤先设置点击之后的背景颜色变换，使用的是排他思想，先将背景颜色的类名全部清除，之后就是将点击的导航栏加上类名，第二步后处理上下两个盒子的关联性问题，最主要的是确定对应位置，使用的是自定义属性标记一下，给每一个小添加index自定义属性，之后切换的时候
基础知识补充
1.获取元素的属性值
console.log(div.getAttribute('index'));
2.自定义属性
element.setAttribute('属性', '值'); 主要针对于自定义属性 div.setAttribute('index', 2);
3.移除属性
移除属性 removeAttribute(属性) div.removeAttribute('index');
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { 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; } </style> </head> <body> <div class="tab"> <div class="tab_list"> <ul> <li class="current">商品介绍</li> <li>规格与包装</li> <li>售后保障</li> <li>商品评价（50000）</li> <li>手机社区</li> </ul> </div> <div class="tab_con"> <div class="item" style="display: block;"> 商品介绍模块内容 </div> <div class="item"> 规格与包装模块内容 </div> <div class="item"> 售后保障模块内容 </div> <div class="item"> 商品评价（50000）模块内容 </div> <div class="item"> 手机社区模块内容 </div> </div> </div> <script> // 1. 背景色 var tab_list = document.querySelector('.tab_list') ; var lis = tab_list.querySelectorAll('li') ; var items = document.querySelectorAll('.item') ; for ( var i = 0 ; i < lis.length ; i ++ ) { // 开始给五个小li设置索引号，使用自定义属性 lis[i].setAttribute('index' ,i) ; lis[i].onclick = function () { // 排他思想 for ( var i = 0 ;i < lis.length ; i ++ ) { lis[i].className = '' ; } this.className = 'current' ; //不需要加. var index = this.getAttribute('index') ; // console.log(index); for ( var i = 0 ; i < items.length ; i ++ ) { items[i].style.display = 'none' ; } items[index].style.display = 'block' ; } } </script> </body> </html>
