原生JavaScript写出Tabs标签页的实例代码


Posted in Javascript onJuly 20, 2020

最近在重新学习JavaScript,手写了一个tabs标签页。

话不多说,直接开始。

首先,是前端页面。

原生JavaScript写出Tabs标签页的实例代码

图1 tabs

先来把tabs分解一下:

原生JavaScript写出Tabs标签页的实例代码

图2 tabs分解

首先,一个大的框div,上面红色的框是导航栏nav,导航栏里是一个无序列表ul,里面三个li标签(黄色的框),li标签里两个绿色标签是两个span,一个用来放导航的名字,一个用来放导航关闭的icon,右边是一个button,用来添加新的导航栏及内容;下方是导航栏的内容section。

导航tabs.html代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <main>
    <div class="tabsbox" id="tab">
      <!-- tab标签 -->
      <nav class="firstnav">
        <ul>
          <li class="liactive"><span>测试1</span><span class="icon-guanbi">X</span></li>
          <li><span>测试2</span><span class="icon-guanbi">X</span></li>
          <li><span>测试3</span><span class=" icon-guanbi">X</span></li>
        </ul>
        <div class="tabadd">
          <span>+</span>
        </div>
      </nav>

      <!-- tab内容 -->
      <div class="tabscon">
        <section class="conactive">测试内容1</section>
        <section>测试内容2</section>
        <section>测试内容3</section>
      </div>
    </div>
  </main>

  <script src="js/tabs.js"></script>
</body>

</html>
<style>
 * {
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
}

main {
  width: 960px;
  height: 500px;
  border-radius: 10px;
  margin: 50px auto;
}

main h4 {
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.tabsbox {
  width: 900px;
  margin: 0 auto;
  height: 400px;
  border: 1px solid lightsalmon;
  position: relative;
}

nav ul {
  overflow: hidden;
}

nav ul li {
  float: left;
  width: 100px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-right: 1px solid #ccc;
  position: relative;
}

nav ul li.liactive {
  border-bottom: 2px solid #fff;
  z-index: 9;
}

#tab input {
  width: 80%;
  height: 60%;
}

nav ul li span:last-child {
  position: absolute;
  user-select: none;
  font-size: 12px;
  top: -18px;
  right: 0;
  display: inline-block;
  height: 20px;
}

.tabadd {
  position: absolute;
  /* width: 100px; */
  top: 0;
  right: 0;
}

.tabadd span {
  display: block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border: 1px solid #ccc;
  float: right;
  margin: 10px;
  user-select: none;
}

.tabscon {
  width: 100%;
  height: 300px;
  position: absolute;
  padding: 30px;
  top: 50px;
  left: 0px;
  box-sizing: border-box;
  border-top: 1px solid #ccc;
}

.tabscon section,
.tabscon section.conactive {
  display: none;
  width: 100%;
  height: 100%;
}

.tabscon section.conactive {
  display: block;
}
</style>

由于给导航栏增删查改的js代码很多,我单独用一个js文件写tabs.js,在tabs.html里引用就行。

实现的导航栏功能有:

1)导航栏的切换功能

2)增加导航栏的功能

3)删除导航栏的功能

tabs.js代码如下:

var that;
class Tab {
  constructor(id){
    that = this;
    //获取元素
    this.main = document.querySelector(id);

    this.add = this.main.querySelector('.tabadd');
    //li的父元素
    this.ul = this.main.querySelector('.firstnav ul:first-child');
    //section的父元素
    this.fsection = this.main.querySelector('.tabscon');
    this.init();
  }
  //初始化操作
  init(){
    this.updateNode();
    this.add.onclick = this.addTab;
    for(let i = 0;i<this.lis.length;i++){
      this.lis[i].index = i;
      this.lis[i].onclick = this.toggleTab;
      this.remove[i].onclick = this.removeTab;
      this.spans[i].ondblclick = this.editTab;
      this.sections[i].ondblclick = this.editTab;
    }
  }
  //获取li跟section
  updateNode(){
    this.lis = this.main.querySelectorAll('li');
    this.sections = this.main.querySelectorAll('section');
    this.remove = this.main.querySelectorAll('.icon-guanbi');
    this.spans = this.main.querySelectorAll('.firstnav li span:first-child')
  }
  //1.切换功能
  toggleTab(){

    that.clearClass();
    this.className = 'liactive';
    that.sections[this.index].className = 'conactive';
  }
  clearClass(){
    for(let i = 0;i<this.lis.length;i++){
      this.lis[i].className = '';
      this.sections[i].className = '';
    }
  }
  //2.添加功能
  addTab(){
    that.clearClass();
    //1)添加li元素和section
    var random = Math.random()
    var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi">X</span></li>';
    var section = '<section class="conactive">'+random+'</section>';

    //2)把两个元素添加到对应的父级元素中
    that.ul.insertAdjacentHTML('beforeend',li);
    that.fsection.insertAdjacentHTML('beforeend',section);
    that.init();
  }
  //3.删除功能
  removeTab(e){
    e.stopPropagation();
    var index = this.parentNode.index;
    console.log(index);
    //删除对应节点
    that.lis[index].remove();
    that.sections[index].remove();
    //删除后及时更新页面中的节点
    that.init();
    //如果当前页面有选中状态,就不用执行下面的步骤
    if(document.querySelector('.liactive')) return;
    //让index前一个处于选中状态
    index--;
    that.lis[index] && that.lis[index].click();
  }
  //4.修改功能
  editTab(){
    let str = this.innerHTML;
    // console.log(str);
    //禁止双击选中文字
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    this.innerHTML='<input type="text">'
    let input = this.children[0];
    input.value = str;
    input.select();
    //input失去焦点后变回span
    input.onblur = function(){
      this.parentNode.innerHTML= this.value;
    }
    //按回车也能
    input.onkeyup = function(e){
      if(e.keyCode == 13){
         this.blur();//获得焦点
      }

    }

  }
}
 new Tab('#tab');
// tab.init();

到此这篇关于原生JavaScript写出Tabs标签页的文章就介绍到这了,更多相关js tabs 标签页内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js Date自定义函数 延迟脚本执行
Mar 10 Javascript
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
Dec 26 Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 Javascript
js中实现继承的五种方法
Jan 25 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
Jul 20 #Javascript
简单了解前端渐进式框架VUE
Jul 20 #Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 #Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 #Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 #Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 #Javascript
详细分析vue表单数据的绑定
Jul 20 #Javascript
You might like
PHP 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
PHP 遍历文件实现代码
2011/05/04 PHP
php.ini中date.timezone设置分析
2011/07/29 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
[01:32]DOTA2 2015国际邀请赛中国区预选赛第四日战报
2015/05/29 DOTA
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
python实现学生信息管理系统
2020/04/05 Python
详解Python中where()函数的用法
2018/03/27 Python
python调用staf自动化框架的方法
2018/12/26 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
python和php学习哪个更有发展
2020/06/17 Python
python中常用的数据结构介绍
2021/01/12 Python
新颖的化妆品活动方案
2014/08/21 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
活动总结书怎么写
2015/05/11 职场文书
生日寿星公答谢词
2015/09/29 职场文书
JVM的类加载器和双亲委派模式你了解吗
2022/03/13 Java/Android
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记
Python实现为PDF去除水印的示例代码
2022/04/03 Python
在 Python 中利用 Pool 进行多线程
2022/04/24 Python