一、使用原生js实现tab栏切换
代码如下，具体注释已经在代码中给出：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .tab { width: 80%; height: 400px; margin: 100px auto; } .tab_list { border: 2px solid #C0C0C0; width: 100%; height: 53px; background-color: #eef1ee; } .tab_list ul { width: 100%; margin: 0; padding: 0; } .tab_list ul li { cursor: pointer; height: 53px; float: left; list-style: none; line-height: 53px; color: black; padding: 0 20px; } .tab_list .current { background-color: #d6271f; color: #fff; } .tab_con { width: 100%; } .item { display: none; } </style> </head> <body> <div class="tab"> <div class="tab_list"> <ul> <li class="current">商品介绍</li> <li>规格与包装</li> <li>售后保障</li> <li>商品评价(5000)</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"> 商品评价(5000)模块内容 </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循环绑定点击事件 for (var i = 0; i < lis.length; i++) { //开始给5个小li 设置索引号 lis[i].setAttribute('index', i); lis[i].onclick = function() { //干掉所有人,其余的li清除class这个类 for (var i = 0; i < lis.length; i++) { lis[i].className = ''; } //留下我自己 this.className = 'current'; //2.下面的显示内容模块 var index = this.getAttribute('index'); console.log(index); //先让所有的item这些div隐藏 for (var i = 0; i < items.length; i++) { items[i].style.display = 'none'; } //留下我自己的，让对应选中的item，显示出来就可以了 items[index].style.display = 'block'; } } </script> </body> </html>
具体效果如图所示：
二、使用jquery实现tab栏切换，jquery的具体使用注释，已经在代码中给出
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <script src="js/jQuery.js"></script> <style> * { margin: 0; padding: 0; } .wrap { width: 100%; height: 100%; } .wrap .box { float: left; width: 20%; font-size: 30px; border: 3px solid #87CEEB; } .box li { height: 70px; text-align: center; line-height: 70px; color: #1296DB; border: 3px solid red; margin-top: 2px; cursor: pointer; } .wrap .details { float: left; width: calc(80% - 12px); background-color: purple; border: 3px solid green; height: 300px; } .details li { list-style: none; } .current { background-color: red; } .item { display: none; } </style> </head> <body> <div class="wrap"> <div class="box"> <ul> <li class="current"> 我是li 1 </li> <li> 我是li 2 </li> <li> 我是li 3 </li> <li> 我是li 4 </li> <li> 我是li 5 </li> </ul> </div> <div class="details"> <ul> <li class="item" style="display: block;">具体的li 1</li> <li class="item">具体的li 2</li> <li class="item">具体的li 3</li> <li class="item">具体的li 4</li> <li class="item">具体的li 5</li> </ul> </div> </div> <script> $(document).ready(function() { //1、点击上部的li，当前li添加current类，其余li移除类 $('.box li').click(function() { //链式编程操作 $('.box li').eq($(this).index()).addClass('current').siblings().removeClass('current'); //2.点击的同时，得到当前li的索引号 var index = $(this).index(); console.log(index); //3.让右边里面相应索引号的item显示，其余的item隐藏 $('.details .item').eq(index).show().siblings().hide(); }); }); </script> </body> </html>
实现效果如下：
