原生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 相关文章推荐
浅谈jQuery事件绑定原理
Jan 02 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 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中的MVC模式运用技巧
2007/05/03 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
javscript对象原型的一些看法
2010/09/19 Javascript
javascript操作JSON的要领总结
2012/12/09 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
vue前后分离调起微信支付
2019/07/29 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
Python入门篇之数字
2014/10/20 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
对Django外键关系的描述
2019/07/26 Python
python读取与处理netcdf数据方式
2020/02/14 Python
详解numpy1.19.4与python3.9版本冲突解决
2020/12/15 Python
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
养殖行业的创业计划书
2014/01/05 职场文书
学生会干部自荐信
2014/02/04 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
2014年新教师工作总结
2014/11/08 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android