javascript - 如何使用 Vanilla Js 进行切换

标签 javascript

我正在制作切换选项卡。

我想变得更紧凑。

我希望我的 js 代码会比现在更短。

var btns = document.getElementsByClassName('btn_tab');
var tab_contents = document.getElementsByClassName('sub_tab_content');
btns[0].addEventListener('click', function() {
  if (!this.classList.contains('selected')) {
    this.classList.add('selected');
    tab_contents[0].classList.add('selected');
  }
  btns[1].classList.remove('selected');
  btns[2].classList.remove('selected');
  tab_contents[1].classList.remove('selected');
  tab_contents[2].classList.remove('selected');
});
btns[1].addEventListener('click', function() {
  if (!this.classList.contains('selected')) {
    this.classList.add('selected');
    tab_contents[1].classList.add('selected');
  }
  btns[0].classList.remove('selected');
  tab_contents[0].classList.remove('selected');
  tab_contents[1].classList.remove('selected');
  btns[2].classList.remove('selected');
});
btns[2].addEventListener('click', function() {
  if (!this.classList.contains('selected')) {
    this.classList.add('selected');
    tab_contents[2].classList.add('selected');
  }
  btns[0].classList.remove('selected');
  btns[1].classList.remove('selected');
  tab_contents[0].classList.remove('selected');
  tab_contents[1].classList.remove('selected');
});
.sub_title {
  height: 30px;
  padding-top: 30px;
  padding-bottom: 70px;
}

.sub_title>img {
  height: 100%;
}

.sub_btn_wrap {
  font-size: 0;
}

.btn_tab {
  padding: 15px 34px;
  border: 1px solid #808080;
  border-bottom: 1px solid white;
  background-color: transparent;
  font-size: 16px;
  border-bottom: 1px solid black;
}

.btn_tab.selected {
  border: 1px solid black;
  border-bottom: 1px solid white;
}

.btn_tab.selected~.btn_tab {
  border-bottom: 1px solid black;
  color: #808080;
  border-left: 0px solid transparent;
}

.sub_tab_content_wrap {
  border-top: 1px solid black;
  width: 100%;
  height: 50px;
}

.sub_tab_content {
  display: none;
  padding-top: 22px;
  font-size: 0;
}

.sub_tab_content.selected {
  display: block;
}

.box-item {
  display: inline-block;
  width: 220px;
  box-sizing: border-box;
  border-left: 1px solid black;
}

.box-item:nth-child(1) {
  border-left: 1px solid transparent;
}

.box-item-img-wrap {
  text-align: center;
}

.box-item-btn-wrap {
  text-align: center;
}

.btn-detail,
.btn-calculate {
  width: 80px;
  height: 30px;
  box-sizing: border-box;
  text-align: center;
  font-size: 14px;
}

.btn-detail {
  border: 1px solid #c9c9c9;
  background-color: white;
  color: #c9c9c9;
  margin-right: 5px;
}

.btn-calculate {
  border: 1px solid #333333;
  background-color: #002c5f;
  color: white;
}
<div style="margin-top: 70px; border-top: 1px solid gray; min-height: 400px;">
  <div class="sub_title">
    <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/h4_recomend_car.png" />
  </div>
  <div class="sub_btn_wrap" style="position: relative; z-index: 3;">
    <button class="btn_tab selected" id="btn_tab01">조회순</button>
    <button class="btn_tab" id="btn_tab02">판매순</button>
    <button class="btn_tab" id="btn_tab03">출시순</button>
    <button style="float:right;border: none; background: none;"><img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/btn_compare_car.png"/></button>
  </div>
  <div class="sub_tab_content_wrap" style="transform: translateY(-1px); position: relative; z-index: 2;">
    <div id="sub_tab_content01" class="sub_tab_content selected">
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_kona.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_grandeur.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_sonata.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_accent.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
    </div>
    <div id="sub_tab_content02" class="sub_tab_content">
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_kona.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_grandeur.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_sonata.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_accent.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
    </div>
    <div id="sub_tab_content03" class="sub_tab_content">
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_kona.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_grandeur.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_sonata.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_accent.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
    </div>
  </div>
</div>

最佳答案

遵循此方法

  • 迭代 btns 和 sub-tab-content 元素。

  • 绑定(bind)click事件，使其首先清除现有选择，然后继续选择。

演示

var btns = document.getElementsByClassName('btn_tab');
var tab_contents = document.getElementsByClassName('sub_tab_content');

[].slice.call( btns ).forEach( function( btn, index ){
   btn.addEventListener('click', function() {
      //clear all selections first
      [].slice.call( tab_contents ).forEach( function( tabContent, index ){
          btns[ index ].classList.remove( "selected" );
          tabContent.classList.remove( "selected" );
      });
      this.classList.add('selected');
      tab_contents[ index ].classList.add('selected');
   });
});
.sub_title {
  height: 30px;
  padding-top: 30px;
  padding-bottom: 70px;
}

.sub_title>img {
  height: 100%;
}

.sub_btn_wrap {
  font-size: 0;
}

.btn_tab {
  padding: 15px 34px;
  border: 1px solid #808080;
  border-bottom: 1px solid white;
  background-color: transparent;
  font-size: 16px;
  border-bottom: 1px solid black;
}

.btn_tab.selected {
  border: 1px solid black;
  border-bottom: 1px solid white;
}

.btn_tab.selected~.btn_tab {
  border-bottom: 1px solid black;
  color: #808080;
  border-left: 0px solid transparent;
}

.sub_tab_content_wrap {
  border-top: 1px solid black;
  width: 100%;
  height: 50px;
}

.sub_tab_content {
  display: none;
  padding-top: 22px;
  font-size: 0;
}

.sub_tab_content.selected {
  display: block;
}

.box-item {
  display: inline-block;
  width: 220px;
  box-sizing: border-box;
  border-left: 1px solid black;
}

.box-item:nth-child(1) {
  border-left: 1px solid transparent;
}

.box-item-img-wrap {
  text-align: center;
}

.box-item-btn-wrap {
  text-align: center;
}

.btn-detail,
.btn-calculate {
  width: 80px;
  height: 30px;
  box-sizing: border-box;
  text-align: center;
  font-size: 14px;
}

.btn-detail {
  border: 1px solid #c9c9c9;
  background-color: white;
  color: #c9c9c9;
  margin-right: 5px;
}

.btn-calculate {
  border: 1px solid #333333;
  background-color: #002c5f;
  color: white;
}
<div style="margin-top: 70px; border-top: 1px solid gray; min-height: 400px;">
  <div class="sub_title">
    <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/h4_recomend_car.png" />
  </div>
  <div class="sub_btn_wrap" style="position: relative; z-index: 3;">
    <button class="btn_tab selected" id="btn_tab01">조회순</button>
    <button class="btn_tab" id="btn_tab02">판매순</button>
    <button class="btn_tab" id="btn_tab03">출시순</button>
    <button style="float:right;border: none; background: none;"><img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/btn_compare_car.png"/></button>
  </div>
  <div class="sub_tab_content_wrap" style="transform: translateY(-1px); position: relative; z-index: 2;">
    <div id="sub_tab_content01" class="sub_tab_content selected">
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_kona.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_grandeur.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_sonata.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_accent.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
    </div>
    <div id="sub_tab_content02" class="sub_tab_content">
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_kona.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_grandeur.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_sonata.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_accent.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
    </div>
    <div id="sub_tab_content03" class="sub_tab_content">
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_kona.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_grandeur.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_sonata.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
      <div class="box-item">
        <div class="box-item-img-wrap">
          <img src="http://wanho1108.dothome.co.kr/kr/images/showroom/kona/img_car_accent.png" />
        </div>
        <div class="box-item-btn-wrap">
          <button class="btn-detail">상세보기</button>
          <button class="btn-calculate">견적내기</button>
        </div>
      </div>
    </div>
  </div>
</div>

关于javascript - 如何使用 Vanilla Js 进行切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46968371/

上一篇：javascript - 如何在 Node.js 中根据纬度和经度设置自定义位置？

下一篇：Javascript:读取关联数组的更好方法

相关文章：

javascript - Node.js 中的函数(错误)回调

javascript - DOM 树中所有子元素的一个监听器

javascript - JSON Data 获取常用数据列表 : Jquery or Javascript

javascript - 使用 knex 和 Bookshelf 查询时如何同时使用 '<>' 和 'whereNotIn'？

javascript - $ ("#input").val() 在使用 $.post() 时返回未定义

javascript - Jquery表单提交空值到Mysql

javascript - 补丁 Rails 3 以修复 CSRF 保护漏洞

javascript - 柏树有什么方法可以等待多个预期条件

javascript - Bootstrap 日期选择器格式不适用于初始化

javascript - 删除时出现奇怪的行为

©2024 IT工具网  联系我们