| tab栏：点击不同的标签，显示不同的内容，被点击的标签样式发生改变（突出选中的是哪一个） 实现思路：1、将tab栏分为上下两部分，上面是导航列表，下面是各部分对应的内容。把标签和内容都写出来，内容按照标签顺序依次顺着写，给标签都添加自定义属性- - -index，属性值从0开始，依次增加1 2、首先实现上面的效果，点击后样式切换，被点击的字体颜色、背景颜色改变等: ①css定义一个类eg：current，里面定义改变后的样式，先给第一个标签写一个该类名，其他的不写类名，
②js获取所有标签元素对象，- - -for循环- - -遍历给每个标签绑定- - -onclick点击事件
③点击事件里面使用排他算法- - -for循环- - -将所有标签设置类名为空- - -className = ‘' ，然后当前被点击的标签设置上面定义的特殊类名- - -this.className = ‘current';
3、实现下面，根据点击的标签，出现不同的内容： ①css将第一个标签对应内容显示，其他的都隐藏起来： .box-tb .item:nth-child(n+2) {display: none;}②获取内容的全部元素对象，获取标签的index值，在点击事件里再添加一个排他思想代码- - -for循环- - -遍历内容的元素对象，将所有内容设置隐藏- - -items[i].style.display = ‘none';然后根据被点击的标签，将对应的内容显示- - -items[index].style.display = ‘block'; 代码示例：<!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>tab栏切换</title> <style> * { margin: 0; padding: 0; } li { list-style: none; } .box { width: 600px; margin: 100px auto; } .box-th { overflow: hidden; width: 100%; background-color: #88ace6; } .box-th ul li { float: left; width: 90px; height: 20px; margin-right: 10px; padding: 5px; text-align: center; } .current { color: #fff; background-color: green; } .box-tb { margin-top: 20px; } .box-tb .item:nth-child(n+2) { display: none; } </style></head><body> <div class="box"> <div class="box-th"> <ul> <li data-index="0" class="current">春</li> <li data-index="1">夏</li> <li data-index="2">秋</li> <li data-index="3">冬</li> </ul> </div> <div class="box-tb"> <div class="item">春季排四季之首，新的轮回从此开启。春，代表着温暖、生长，植物发芽，风和日暖，鸟语花香。这季节的气温、日照、降雨，处于一年中的转折点，趋于上升或增多。春季，阴阳之气开始转变，万物随阳气上升而萌牙生长，春季是万物生长、春耕播种的季节，所谓“一年之计在于春”。 春季起始
下载地址:
JavaScript实现下拉菜单的显示隐藏
JavaScript实现复选框全选或全取消操作 |
