如何用JS实现选项卡功能

简介: 如何用JS实现选项卡功能

那么到底要如何实现选项卡的效果呢?我们一起来看一下。


总体结构分为两部分

  • 选卡部分
  • 内容部分

选卡部分点击时要变色,内容部分要隐藏

代码展示

HTML代码

<!-- 选项卡 -->
    <div class="select">
      <span style="background-color: hotpink;">选卡一</span>
      <span style="background-color: lightpink;">选卡二</span>
      <span style="background-color: lightpink;">选卡三</span>
    </div>
    
    <!-- 内容区 -->
    <div class="select_content">
      <span class="top" style="background-color: coral;">内容一</span>
      <span class="top_one" style="background-color: chocolate;">内容二</span>
      <span class="top_two" style="background-color: brown;">内容三</span>
    </div>

给选项卡和内容区设置它的初始背景颜色,方便区分点击时显示的颜色。

结构写完之后当然要添加样式了,使页面变得更加美观!


CSS代码

*{
  margin: 0;
  padding: 0;
}
.select{  
  display: flex;
  width: 100%;
}
.select span{
  width: 70px;
  height: 50px;
  display: block;
  text-align: center;
  margin: 15px 18px;
}
.select_content{
  width: 300px;
  height: 500px;
}
.select_content span{
  display: block;
  width: 300px;
  height: 200px;
  margin: 5px 10px;
  color: #fff;
  text-align: center;
}
.select_content .top_one{
  display: none;
}
.select_content .top_two{
  display: none;
}

把内容一内容二隐藏起来。


JS代码

// // 获取选项卡那个<div>
let one = document.getElementsByClassName("select")[0];
// // console.log(box);
// // 获取内容
let two = document.getElementsByClassName("select_content")[0];
// // console.log(six);
// // 获取select的子元素span
let first = one.children;
// // console.log(first[1]);
// // 获取select_content的子元素span
let second = two.children;
// // console.log(second);
for (let i = 0; i < first.length; i++) {
  first[i].onclick = function() {
    for (let k = 0; k < second.length; k++) {
      second[k].style.display = 'none';
      first[k].style.backgroundColor = "lightpink";
    }
    second[i].style.display = 'block';
    first[i].style.backgroundColor = "hotpink";
  }
}

先执行循环内容区,再执行选卡并添加点击事件,点击选卡时它的背景颜色会改变,另外两个内容区会隐藏。

以上就是用JS实现选项卡功能的全部流程,当然不止这一种方法,快去多多练习尝试!

目录
相关文章
|
3天前
|
JavaScript 前端开发
js实现点击音频实现播放功能
js实现点击音频实现播放功能
|
3天前
|
前端开发 JavaScript
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
使用JavaScript实现复杂功能:构建一个自定义的拖拽功能
|
3天前
|
JavaScript 前端开发 测试技术
编写JavaScript模块化代码主要涉及将代码分割成不同的文件或模块,每个模块负责处理特定的功能或任务
【5月更文挑战第10天】编写JavaScript模块化代码最佳实践:使用ES6模块或CommonJS(Node.js),组织逻辑相关模块,避免全局变量,封装细节。利用命名空间和目录结构,借助Webpack处理浏览器环境的模块。编写文档和注释,编写单元测试以确保代码质量。通过这些方法提升代码的可读性和可维护性。
13 3
|
3天前
|
JavaScript 前端开发
JavaScript实现识别二维码信息功能
JavaScript实现识别二维码信息功能
11 1
|
3天前
|
JavaScript
js实现全屏功能——易懂版
js实现全屏功能——易懂版
9 0
|
3天前
|
JavaScript 前端开发 API
如何利用JavaScript和Electron构建具有丰富功能的桌面应用
【4月更文挑战第30天】如何利用JavaScript和Electron构建具有丰富功能的桌面应用
5 0
|
3天前
|
JavaScript 前端开发
实现一个JavaScript动态日期功能
实现一个JavaScript动态日期功能
|
3天前
|
JavaScript 前端开发
JavaScript模糊搜索功能
JavaScript模糊搜索功能
|
3天前
|
JavaScript 前端开发
JavaScript三级联动功能
JavaScript三级联动功能
|
3天前
|
JavaScript
JS实现分页功能
JS实现分页功能