使用 class实现tab切换

最新推荐文章于 2022-12-14 15:14:04 发布

youngjqz

最新推荐文章于 2022-12-14 15:14:04 发布

阅读量422

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/youngjqz/article/details/124610078

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

使用面向对象实现了tab的切换,新增,编辑,删除
html 结构

  <body>
    <h1>Tab 切换</h1>
    <div class="main_box" id="tab_wrap">
      <!-- tab -->
      <div class="tab_wrap">
        <div class="tab">
          <ul>
            <li class="active_tab">
              <span>Tab1</span><span class="pos">x</span>
            </li>
            <li><span>Tab2</span><span class="pos">x</span></li>
            <li><span>Tab3</span><span class="pos">x</span></li>
          </ul>
        </div>
        <div class="add">添加 +</div>
      </div>

      <!-- tabContent -->
      <div class="content_wrap">
        <section class="content_active"><span>内容1</span></section>
        <section><span>内容2</span></section>
        <section><span>内容3</span></section>
      </div>
    </div>
  </body>

css样式

    <style>
      .main_box {
        width: 500px;
        height: 400px;
        border: 1px solid #999;
      }
      .main_box li {
        list-style: none;
        line-height: 40px;
        padding: 0 20px;
        border-bottom: 1px solid #999;
        border-right: 1px solid #999;
        position: relative;
      }
      .main_box li .pos {
        position: absolute;
        right: 0;
        top: 0;
        width: 10px;
        height: 10px;
        display: inline-block;
        background-color: #000;
        color: #fff;
        font-size: 10px;
        line-height: 10px;
        text-align: center;
      }
      .main_box li input {
        width: 60px;
      }
      .main_box .active_tab {
        border-bottom: none;
      }
      .main_box .tab_wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .main_box ul {
        display: flex;
        padding: 0;
        margin: 0;
      }
      .main_box .add {
        margin-right: 10px;
        font-size: 10px;
        border: 1px solid #999;
        border-radius: 5px;
        padding: 4px;
      }
      .content_wrap {
        width: 100%;
        min-height: 300px;
        margin-top: 30px;
      }
      .content_wrap section {
        display: none;
        padding: 20px;
        box-sizing: border-box;
        width: 100%;
        height: 300px;
      }
      .content_wrap section span {
        display: block;
        height: 280px;
      }
      .content_wrap section span input,
      .content_wrap section span textarea {
        width: 100%;
        height: 100%;
        vertical-align: top;
        outline: none;
        font-size: 12px;
      }
      .content_wrap .content_active {
        display: block;
      }
    </style>

JavaScript 代码

 class Tab {
    constructor(id) {
      this.tabWrap = document.querySelector(id);
      this.addBtn = this.tabWrap.querySelector(".add");
      this.addBtn.onclick = this.addTab.bind(this);
      this.init();
    }
    init() {
      this.tabArr = this.tabWrap.querySelectorAll(".tab li");
      this.tabContentArr = this.tabWrap.querySelectorAll(
        ".content_wrap section"
      );
      this.removeBtnArr = this.tabWrap.querySelectorAll(".tab li .pos");
      this.editDomArr = this.tabWrap.querySelectorAll(
        ".tab li span:first-child"
      );
      this.editSectionArr = this.tabWrap.querySelectorAll(
        ".content_wrap section span:first-child"
      );
      for (let i = 0; i < this.tabArr.length; i++) {
        this.tabArr[i].index = i;
        console.log(this.tabArr[i]);
        this.tabArr[i].onclick = this.changeTab.bind(this, i);
        this.removeBtnArr[i].onclick = this.removeTab.bind(this, i);
        this.editDomArr[i].ondblclick = this.editTab.bind(
          this,
          "text",
          this.editDomArr[i]
        );
        this.editSectionArr[i].ondblclick = this.editTab.bind(
          this,
          "textarea",
          this.editSectionArr[i]
        );
      }
    }
    changeTab(index) {
      this.clearStyle();
      this.tabArr[index].className = "active_tab";
      this.tabContentArr[index].className = "content_active";
    }

    clearStyle() {
      for (let i = 0; i < this.tabArr.length; i++) {
        this.tabArr[i].className = "";
        this.tabContentArr[i].className = "";
      }
    }

    addTab() {
      this.clearStyle();
      let li =
        '<li class="active_tab"><span>新的Tab</span><span class="pos">x</span></li>';
      this.tabWrap.querySelector(".tab ul").insertAdjacentHTML("beforeend", li);
      let section =
        ' <section class="content_active"><span>新tab内容</span></section>';
      this.tabWrap
        .querySelector(".content_wrap")
        .insertAdjacentHTML("beforeend", section);
      this.init();
    }

    removeTab(index, event) {
      event.stopPropagation();
      this.tabArr[index].remove();
      this.tabContentArr[index].remove();

      if (this.tabWrap.querySelector(".active_tab")) return;
      index == 0 && this.tabArr.length > 1 && this.tabArr[index + 1].click();
      index > 0 && this.tabArr[index - 1].click();
      this.init();
    }

    editTab(type, element) {
      if (element.querySelector("input")) return;
      // 取消双击选择文案
      window.getSelection
        ? window.getSelection().removeAllRanges()
        : document.selection.empty();
        
      let str = element.innerHTML;
      element.innerHTML =
        type == "text"
          ? `<input type="text" value="${str}" />`
          : `<textarea  >${str}</textarea>`;
      let input =
        type == "text"
          ? element.querySelector("input")
          : element.querySelector("textarea");
      input.select();
      input.onblur = () => {
        element.innerHTML = input.value;
      };
      input.onkeyup = (e) => {
        if (e.keyCode == 13) {
          input.blur();
        }
      };
    }
  }
  new Tab("#tab_wrap");

youngjqz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用 class实现tab切换

使用面向对象实现了tab的切换,新增,编辑,删除html 结构 <body> <h1>Tab 切换</h1> <div class="main_box" id="tab_wrap">  <div class="tab_wrap"> <div class="tab"> <ul> <
复制链接

扫一扫