如何与Vanilla Js进行切换

时间：2017-10-27 05:57:40

标签： javascript

我正在制作切换标签。

我想做得更紧凑。

我希望我的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>
SCENE_MODE_NIGHT

2 个答案:

答案 0 :(得分：1)

遵循这种方法

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

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

<强>演示

＆＃13;
＆＃13; 
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');
   });
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您需要选择buttonWrapper并使用event.target != event.currentTarget，您可以检查是否单击了子元素（按钮）或包装器。之后你只需要你的logik。

代码

var subButtonWrapper = document.querySelector('.sub_btn_wrap')

subButtonWrapper.addEventListener('click', toggleContent)

function toggleContent(event) {
  if (event.target != event.currentTarget) {
    var id = event.target.id.replace('btn_tab', '')
    toggleClass('.sub_btn_wrap .selected', '#' + event.target.id, 'selected')
    toggleClass('.sub_tab_content_wrap .selected', '#sub_tab_content' + id, 'selected')
  }
}

function toggleClass(parentElementQuery, childElementQuery, className) {
  document.querySelector(parentElementQuery).classList.toggle(className)
  document.querySelector(childElementQuery).classList.toggle(className)
}

实施例

var subButtonWrapper = document.querySelector('.sub_btn_wrap')

subButtonWrapper.addEventListener('click', toggleContent)

function toggleContent(event) {
  if (event.target != event.currentTarget) {
    var id = event.target.id.replace('btn_tab', '')
    toggleClass('.sub_btn_wrap .selected', '#' + event.target.id, 'selected')
    toggleClass('.sub_tab_content_wrap .selected', '#sub_tab_content' + id, 'selected')
  }
}

function toggleClass(parentElementQuery, childElementQuery, className) {
  document.querySelector(parentElementQuery).classList.toggle(className)
  document.querySelector(childElementQuery).classList.toggle(className)
}
.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>

相关问题
最新问题