选项卡切换
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; box-sizing: border-box; } .tabSwitch { border: 1px solid blue; width: 500px; height: auto; position: relative; margin: 100px auto; } .tab-title { width: 500px; } .tab-title li { float: left; width: 25%; height: 50px; border-right: 1px solid purple; background-color: skyblue; color: #fff; font-size: 25px; text-align: center; line-height: 50px; cursor: pointer; } .tab-content { width:500px ; height: auto; } .tab-content li { width: 100%; position: absolute; left: 0; top:50px; background-color: #bd2c00; color: #fff; font-size: 50px; text-align: center; line-height: 400px; /*隐藏*/ display: none; } </style> </head> <body> <div class="tabSwitch"> <!--上面四个盒子 标题--> <ul class="tab-title"> <li style="background-color: red">时政新闻</li> <li>娱乐新闻</li> <li>体育新闻</li> <li>热点新闻</li> </ul> <!--下面内容盒子--> <ul class="tab-content"> <li style="display: block">张</li> <li>王</li> <li>李</li> <li>赵</li> </ul> </div> <script src="获取元素.js"></script> <script> /* * 1:获取元素 * 2：要给上面Title盒子绑定鼠标移入事件 onmouseover 移入 onmouseout移出 * * 3：鼠标移入以后显示相应模块 相应? * * (1)设置自定义下标属性在4个title0,1,2,3 * (2)鼠标移入拿到index下标属性 内容盒子[index]显示或者隐藏 * * * */ /*onload 加载事件 保证静态资源 加载成功 */ window.onload = function () { var titleLis = my$All('.tab-title li'); var contentLis = my$All('.tab-content li'); console.log(titleLis,contentLis) for(var i =0;i<titleLis.length;i++){ titleLis[i].setAttribute('index',i) titleLis[i].onmouseover = function () { var index = this.getAttribute('index') console.log(index) for (var j=0;j<contentLis.length;j++){ contentLis[j].style.display='none' titleLis[j].style.backgroundColor='skyblue' } contentLis[index].style.display='block' titleLis[index].style.backgroundColor='red' } } } </script> </body> </html> 获取元素.js代码如下：
/*获取元素 ---》 一个 */ function my$(selector ) { /*判断？ # */ return document.querySelector(selector) } function my$All(selector ) { /*判断？ # */ return document.querySelectorAll(selector) } 结果如下：
排他思想
自己变化其它的都不要变化
<head> <meta charset="UTF-8"> <title></title> <style> div { width: 200px; height: 200px; background-color: #a71d5d; float: left; margin-left: 50px; } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <script> var divs = document.getElementsByTagName('div') for(var i =0;i<divs.length;i++){ divs[i].onclick = function () { /*先全部变成上面默认背景色*/ for(var j =0;j<divs.length;j++){ divs[j].style.backgroundColor ='#a71d5d' } this.style.backgroundColor = 'yellow' } } </script> </body> 结果如下：
文章来源: https://blog.csdn.net/qq_39112101/article/details/88861409