0

Помогите пожалуйста решить вопрос с табами. При навешивание click на общий div в котором есть картинка и ссылка, переключение таба срабатывает только при условии что я кликну в пустую область где нет картинки или ссылки, а нужно что бы таб срабатывал при нажатие на любое содержание div. Без использования jQuery. Пример: https://codepen.io/Degaucho/pen/rgdXmo

let glazingInfo = document.querySelector('.glazing_slider'),
		glazingTab = glazingInfo.querySelectorAll('.glazing_block'),
		tabContent = document.querySelectorAll('.glazing-tabcontent');

	let hideTabContent = (a) => {
		for (let i = a; i < tabContent.length; i++) {
			tabContent[i].classList.remove('show');
			tabContent[i].classList.add('hide');
			// tab[i].classList.remove('active');
		}
	}

	hideTabContent(1);

	let showTabContent = (b) => {
		if (tabContent[b].classList.contains('hide')) {
			tabContent[b].classList.remove('hide');
			tabContent[b].classList.add('show');
			// tab[i].classList.add('active');
		}
	}

	glazingInfo.addEventListener('click', (event) => {
		let target = event.target;
		if (target && target.classList.contains('glazing_block')) {
			for(let i = 0; i < glazingTab.length; i++) {
				if (target == glazingTab[i]) {
					hideTabContent(0);
					showTabContent(i);
					break;
				}
			}
		}
	});
.glazing_block {
  display: inline-block;
}

.glazing_block img {
  display: block;
  margin: 0 auto;
  margin-bottom: 2rem;
}

.glazing_block a {
  font-size: 1.8rem;
  font-weight: 600;
  text-decoration: underline;
}

.aluminum, .plastic, .french, .rise {
  display: none;
}

.hide {
  display: none;
} 

.show {
  display: flex;
}
<div class="glazing_slider">
          <div class="glazing_block">
            <img src="img/glazing/icons/1.png" alt="#">
            <a class="tree_link">Таб 1</a>
          </div>
          <div class="glazing_block">
            <img src="img/glazing/icons/2.png" alt="#">
            <a class="aluminum_link">Таб 2</a>
          </div>
          <div class="glazing_block">
            <img src="img/glazing/icons/3.png" alt="#">
            <a class="plastic_link">Таб 3</a>
          </div>
          <div class="glazing_block">
            <img src="img/glazing/icons/4.png" alt="#">
            <a class="french_link">Таб 4</a>
          </div>
          <div class="glazing_block">
            <img src="img/glazing/icons/5.png" alt="#">
            <a class="rise_link">Таб 5</a>
          </div>
        </div>

 <div class="row tree glazing-tabcontent">

          <div class="col-md-6 no-padding">
           <div class="glazing_cold">
             <h3>Холодное</h3>
             <img src="img/glazing/img_cold.png" alt="#">
             <ul>
               <li>Конструктивная толщина 42-58 мм</li>
               <li>Остекление: полированное стекло (толщиной 4 - 5 мм)</li>
               <li>Теплоизоляция: 0,07 м<sup>2</sup> * С/Вт</li>
               <li>Звукоизоляция: 20-27 дб</li>
             </ul>
           </div> 
            <div class="glazing_price">
                <p>2600 руб.кв.м.<br><span>под ключ с установкой</span></p>
                <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
            </div>
          </div>

          <div class="col-md-6 no-padding">
            <div class="glazing_warm">
              <h3>теплое</h3>
              <img src="img/glazing/img_warm.png" alt="#">
              <ul>
                <li>Конструктивная толщина профиля: 58-78 м</li>
                <li>Остекление: однокамерные и двухкамерные стеклопакеты</li>
                <li>Теплоизоляция: 0,63 - 1,05 м<sup>2</sup> * С/Вт</li>
                <li>Звукоизоляция: до 5 класса</li>
              </ul>
            </div> 
             <div class="glazing_price">
                 <p>4000 руб.кв.м.<br><span>под ключ с установкой</span></p>
                 <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
             </div>
          </div>

        </div> <!-- /Tree -->

        <!-- Aluminum -->
        <div class="row aluminum glazing-tabcontent">

          <div class="col-md-6 no-padding">
           <div class="glazing_cold">
             <h3>Холодное</h3>
             <img src="img/glazing/aluminum/cold.jpg" alt="#">
             <ul>
               <li>Конструктивная толщина 40-50 мм</li>
               <li>Остекление: полированное стекло (толщиной 4 - 5 мм)</li>
               <li>Теплоизоляция: 0,07 м<sup>2</sup> * С/Вт</li>
               <li>Звукоизоляция: 20-27 дб</li>
             </ul>
           </div> 
            <div class="glazing_price">
                <p>4000 руб.кв.м.<br><span>под ключ с установкой</span></p>
                <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
            </div>
          </div>

          <div class="col-md-6 no-padding">
            <div class="glazing_warm">
              <h3>теплое</h3>
              <img src="img/glazing/aluminum/warm.jpg" alt="#">
              <ul>
                <li>Конструктивная толщина профиля: 60-68 м</li>
                <li>Остекление: однокамерные и двухкамерные стеклопакеты</li>
                <li>Теплоизоляция: 0,63 - 1,05 м<sup>2</sup> * С/Вт</li>
                <li>Звукоизоляция: до 5 класса</li>
              </ul>
            </div> 
             <div class="glazing_price">
                 <p>8000 руб.кв.м.<br><span>под ключ с установкой</span></p>
                 <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
             </div>
          </div>

        </div> <!-- /Aluminum -->

        <!-- Plastic -->
        <div class="row plastic glazing-tabcontent">

          <div class="col-md-6 col-md-offset-3 no-padding">
            <div class="glazing_warm">
              <h3>теплое</h3>
              <img src="img/glazing/plastic/warm.jpg" alt="#">
              <ul>
                <li>Конструктивная толщина профиля: 58-70 м</li>
                <li>Остекление: однокамерные и двухкамерные стеклопакеты</li>
                <li>Теплоизоляция: 0,63 - 1,05 м<sup>2</sup> * С/Вт</li>
                <li>Звукоизоляция: до 5 класса</li>
              </ul>
            </div> 
             <div class="glazing_price">
                 <p>5500 руб.кв.м.<br><span>под ключ с установкой</span></p>
                 <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
             </div>
          </div>

        </div> <!-- /Plastic -->

        <!-- French -->
        <div class="row french glazing-tabcontent">

          <div class="col-md-6 no-padding">
           <div class="glazing_cold">
             <h3>Пластик</h3>
             <img src="img/glazing/french/plastic.jpg" alt="#">
             <ul>
               <li>Конструктивная толщина 58-70 мм</li>
               <li>Остекление: однокамерные и двухкамерные стеклопакеты</li>
               <li>Теплоизоляция: 0,63 - 1,05 м<sup>2</sup> * С/Вт</li>
               <li>Звукоизоляция: до 5 класса</li>
             </ul>
           </div> 
            <div class="glazing_price">
                <p>5500 руб.кв.м.<br><span>под ключ с установкой</span></p>
                <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
            </div>
          </div>

          <div class="col-md-6 no-padding">
            <div class="glazing_warm">
              <h3>Алюминий</h3>
              <img src="img/glazing/french/aluminum.jpg" alt="#">
              <ul>
                <li>Конструктивная толщина профиля: 60-68 мм</li>
                <li>Остекление: однокамерные и двухкамерные стеклопакеты</li>
                <li>Теплоизоляция: 0,63 - 1,05 м<sup>2</sup> * С/Вт</li>
                <li>Звукоизоляция: до 5 класса</li>
              </ul>
            </div> 
             <div class="glazing_price">
                 <p>8000 руб.кв.м.<br><span>под ключ с установкой</span></p>
                 <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
             </div>
          </div>

        </div> <!-- /French -->

        <!-- Rise -->
        <div class="row rise glazing-tabcontent">

          <div class="col-md-6 no-padding">
           <div class="glazing_cold">
             <h3>Алюминий</h3>
             <img src="img/glazing/rise/aluminum.jpg" alt="#">
             <ul>
               <li>Конструктивная толщина 40-50 мм</li>
               <li>Остекление: полированное стекло (толщиной 4 - 5 мм)</li>
               <li>Теплоизоляция: 0,07 м<sup>2</sup> * С/Вт</li>
               <li>Звукоизоляция: 20-27 дб</li>
             </ul>
           </div> 
            <div class="glazing_price">
                <p>4000 руб.кв.м.<br><span>под ключ с установкой</span></p>
                <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
            </div>
          </div>

          <div class="col-md-6 no-padding">
            <div class="glazing_warm">
              <h3>Дерево</h3>
              <img src="img/glazing/rise/tree.jpg" alt="#">
              <ul>
                <li>Конструктивная толщина профиля: 40-42 мм</li>
                <li>Остекление: полированное стекло (толщиной 4 мм)</li>
                <li>Теплоизоляция: 0,07 м<sup>2</sup> * С/Вт</li>
                <li>Звукоизоляция: 20-27 дб</li>
              </ul>
            </div> 
             <div class="glazing_price">
                 <p>8000 руб.кв.м.<br><span>под ключ с установкой</span></p>
                 <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
             </div>
          </div>

        </div><!-- /Rise -->

1
  • Можете объяснить, почему в этом скрипте hideTabContent(0) скрывает весь контент, почему "0" так работает?
    – Daniil
    2 мая 2020 в 8:15

2 ответа 2

1
let target = event.target;
if (target && target.classList.contains('glazing_block')) {
let target = event.target.closest('.glazing_block');
if (target) {

Код полностью:

let glazingInfo = document.querySelector('.glazing_slider'),
		glazingTab = glazingInfo.querySelectorAll('.glazing_block'),
		tabContent = document.querySelectorAll('.glazing-tabcontent');

	let hideTabContent = (a) => {
		for (let i = a; i < tabContent.length; i++) {
			tabContent[i].classList.remove('show');
			tabContent[i].classList.add('hide');
			// tab[i].classList.remove('active');
		}
	}

	hideTabContent(1);

	let showTabContent = (b) => {
		if (tabContent[b].classList.contains('hide')) {
			tabContent[b].classList.remove('hide');
			tabContent[b].classList.add('show');
			// tab[i].classList.add('active');
		}
	}

	glazingInfo.addEventListener('click', (event) => {
    let target = event.target.closest('.glazing_block');
    if (target) {
			for(let i = 0; i < glazingTab.length; i++) {
				if (target == glazingTab[i]) {
					hideTabContent(0);
					showTabContent(i);
					break;
				}
			}
		}
	});
.glazing_block {
  display: inline-block;
}

.glazing_block img {
  display: block;
  margin: 0 auto;
  margin-bottom: 2rem;
}

.glazing_block a {
  font-size: 1.8rem;
  font-weight: 600;
  text-decoration: underline;
}

.aluminum, .plastic, .french, .rise {
  display: none;
}

.hide {
  display: none;
} 

.show {
  display: flex;
}
<div class="glazing_slider">
          <div class="glazing_block">
            <img src="img/glazing/icons/1.png" alt="#">
            <a class="tree_link">Таб 1</a>
          </div>
          <div class="glazing_block">
            <img src="img/glazing/icons/2.png" alt="#">
            <a class="aluminum_link">Таб 2</a>
          </div>
          <div class="glazing_block">
            <img src="img/glazing/icons/3.png" alt="#">
            <a class="plastic_link">Таб 3</a>
          </div>
          <div class="glazing_block">
            <img src="img/glazing/icons/4.png" alt="#">
            <a class="french_link">Таб 4</a>
          </div>
          <div class="glazing_block">
            <img src="img/glazing/icons/5.png" alt="#">
            <a class="rise_link">Таб 5</a>
          </div>
        </div>

 <div class="row tree glazing-tabcontent">

          <div class="col-md-6 no-padding">
           <div class="glazing_cold">
             <h3>Холодное</h3>
             <img src="img/glazing/img_cold.png" alt="#">
             <ul>
               <li>Конструктивная толщина 42-58 мм</li>
               <li>Остекление: полированное стекло (толщиной 4 - 5 мм)</li>
               <li>Теплоизоляция: 0,07 м<sup>2</sup> * С/Вт</li>
               <li>Звукоизоляция: 20-27 дб</li>
             </ul>
           </div> 
            <div class="glazing_price">
                <p>2600 руб.кв.м.<br><span>под ключ с установкой</span></p>
                <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
            </div>
          </div>

          <div class="col-md-6 no-padding">
            <div class="glazing_warm">
              <h3>теплое</h3>
              <img src="img/glazing/img_warm.png" alt="#">
              <ul>
                <li>Конструктивная толщина профиля: 58-78 м</li>
                <li>Остекление: однокамерные и двухкамерные стеклопакеты</li>
                <li>Теплоизоляция: 0,63 - 1,05 м<sup>2</sup> * С/Вт</li>
                <li>Звукоизоляция: до 5 класса</li>
              </ul>
            </div> 
             <div class="glazing_price">
                 <p>4000 руб.кв.м.<br><span>под ключ с установкой</span></p>
                 <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
             </div>
          </div>

        </div> <!-- /Tree -->

        <!-- Aluminum -->
        <div class="row aluminum glazing-tabcontent">

          <div class="col-md-6 no-padding">
           <div class="glazing_cold">
             <h3>Холодное</h3>
             <img src="img/glazing/aluminum/cold.jpg" alt="#">
             <ul>
               <li>Конструктивная толщина 40-50 мм</li>
               <li>Остекление: полированное стекло (толщиной 4 - 5 мм)</li>
               <li>Теплоизоляция: 0,07 м<sup>2</sup> * С/Вт</li>
               <li>Звукоизоляция: 20-27 дб</li>
             </ul>
           </div> 
            <div class="glazing_price">
                <p>4000 руб.кв.м.<br><span>под ключ с установкой</span></p>
                <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
            </div>
          </div>

          <div class="col-md-6 no-padding">
            <div class="glazing_warm">
              <h3>теплое</h3>
              <img src="img/glazing/aluminum/warm.jpg" alt="#">
              <ul>
                <li>Конструктивная толщина профиля: 60-68 м</li>
                <li>Остекление: однокамерные и двухкамерные стеклопакеты</li>
                <li>Теплоизоляция: 0,63 - 1,05 м<sup>2</sup> * С/Вт</li>
                <li>Звукоизоляция: до 5 класса</li>
              </ul>
            </div> 
             <div class="glazing_price">
                 <p>8000 руб.кв.м.<br><span>под ключ с установкой</span></p>
                 <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
             </div>
          </div>

        </div> <!-- /Aluminum -->

        <!-- Plastic -->
        <div class="row plastic glazing-tabcontent">

          <div class="col-md-6 col-md-offset-3 no-padding">
            <div class="glazing_warm">
              <h3>теплое</h3>
              <img src="img/glazing/plastic/warm.jpg" alt="#">
              <ul>
                <li>Конструктивная толщина профиля: 58-70 м</li>
                <li>Остекление: однокамерные и двухкамерные стеклопакеты</li>
                <li>Теплоизоляция: 0,63 - 1,05 м<sup>2</sup> * С/Вт</li>
                <li>Звукоизоляция: до 5 класса</li>
              </ul>
            </div> 
             <div class="glazing_price">
                 <p>5500 руб.кв.м.<br><span>под ключ с установкой</span></p>
                 <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
             </div>
          </div>

        </div> <!-- /Plastic -->

        <!-- French -->
        <div class="row french glazing-tabcontent">

          <div class="col-md-6 no-padding">
           <div class="glazing_cold">
             <h3>Пластик</h3>
             <img src="img/glazing/french/plastic.jpg" alt="#">
             <ul>
               <li>Конструктивная толщина 58-70 мм</li>
               <li>Остекление: однокамерные и двухкамерные стеклопакеты</li>
               <li>Теплоизоляция: 0,63 - 1,05 м<sup>2</sup> * С/Вт</li>
               <li>Звукоизоляция: до 5 класса</li>
             </ul>
           </div> 
            <div class="glazing_price">
                <p>5500 руб.кв.м.<br><span>под ключ с установкой</span></p>
                <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
            </div>
          </div>

          <div class="col-md-6 no-padding">
            <div class="glazing_warm">
              <h3>Алюминий</h3>
              <img src="img/glazing/french/aluminum.jpg" alt="#">
              <ul>
                <li>Конструктивная толщина профиля: 60-68 мм</li>
                <li>Остекление: однокамерные и двухкамерные стеклопакеты</li>
                <li>Теплоизоляция: 0,63 - 1,05 м<sup>2</sup> * С/Вт</li>
                <li>Звукоизоляция: до 5 класса</li>
              </ul>
            </div> 
             <div class="glazing_price">
                 <p>8000 руб.кв.м.<br><span>под ключ с установкой</span></p>
                 <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
             </div>
          </div>

        </div> <!-- /French -->

        <!-- Rise -->
        <div class="row rise glazing-tabcontent">

          <div class="col-md-6 no-padding">
           <div class="glazing_cold">
             <h3>Алюминий</h3>
             <img src="img/glazing/rise/aluminum.jpg" alt="#">
             <ul>
               <li>Конструктивная толщина 40-50 мм</li>
               <li>Остекление: полированное стекло (толщиной 4 - 5 мм)</li>
               <li>Теплоизоляция: 0,07 м<sup>2</sup> * С/Вт</li>
               <li>Звукоизоляция: 20-27 дб</li>
             </ul>
           </div> 
            <div class="glazing_price">
                <p>4000 руб.кв.м.<br><span>под ключ с установкой</span></p>
                <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
            </div>
          </div>

          <div class="col-md-6 no-padding">
            <div class="glazing_warm">
              <h3>Дерево</h3>
              <img src="img/glazing/rise/tree.jpg" alt="#">
              <ul>
                <li>Конструктивная толщина профиля: 40-42 мм</li>
                <li>Остекление: полированное стекло (толщиной 4 мм)</li>
                <li>Теплоизоляция: 0,07 м<sup>2</sup> * С/Вт</li>
                <li>Звукоизоляция: 20-27 дб</li>
              </ul>
            </div> 
             <div class="glazing_price">
                 <p>8000 руб.кв.м.<br><span>под ключ с установкой</span></p>
                 <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
             </div>
          </div>

        </div><!-- /Rise -->

0

@Qwerty уже объяснил пичину. Предложу еще такой вариант, вдруг пригодится
(чуть проще выглядит):

(function(){

let glazingInfo = document.querySelector('.glazing_slider'),
    glazingTab  = glazingInfo.querySelectorAll('.glazing_block'),
    tabContent  = document.querySelectorAll('.glazing-tabcontent');
    
for(let i = 0; i < glazingTab.length; i++){
  glazingTab[i].addEventListener('click', function(){
    for(let u = 0; u < glazingTab.length; u++){
      glazingTab[u].classList.remove('active');
      tabContent[u].style.display = 'none';
    }
    
    this.classList.add('active');
    tabContent[i].style.display = 'flex';
  });
}

})();
.glazing_block {
  display: inline-block;
  cursor: pointer;
}

.glazing_block img {
  display: block;
  margin: 0 auto;
  margin-bottom: 2rem;
}

.glazing_block a {
  font-size: 1.8rem;
  font-weight: 600;
  text-decoration: underline;
}

.aluminum, .plastic, .french, .rise {
  display: none;
}

.show {display: flex;}
.glazing_block.active {color: red;}
<div class="glazing_slider">
  <div class="glazing_block active">
    <img src="img/glazing/icons/1.png" alt="#">
    <a class="tree_link">Таб 1</a>
  </div>
  <div class="glazing_block">
    <img src="img/glazing/icons/2.png" alt="#">
    <a class="aluminum_link">Таб 2</a>
  </div>
  <div class="glazing_block">
    <img src="img/glazing/icons/3.png" alt="#">
    <a class="plastic_link">Таб 3</a>
  </div>
  <div class="glazing_block">
    <img src="img/glazing/icons/4.png" alt="#">
    <a class="french_link">Таб 4</a>
  </div>
  <div class="glazing_block">
    <img src="img/glazing/icons/5.png" alt="#">
    <a class="rise_link">Таб 5</a>
  </div>
</div>

<div class="row tree glazing-tabcontent show">

  <div class="col-md-6 no-padding">
    <div class="glazing_cold">
      <h3>Холодное</h3>
      <img src="img/glazing/img_cold.png" alt="#">
      <ul>
        <li>Конструктивная толщина 42-58 мм</li>
        <li>Остекление: полированное стекло (толщиной 4 - 5 мм)</li>
        <li>Теплоизоляция: 0,07 м<sup>2</sup> * С/Вт</li>
        <li>Звукоизоляция: 20-27 дб</li>
      </ul>
    </div> 
    <div class="glazing_price">
      <p>2600 руб.кв.м.<br><span>под ключ с установкой</span></p>
      <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
    </div>
  </div>

  <div class="col-md-6 no-padding">
    <div class="glazing_warm">
      <h3>теплое</h3>
      <img src="img/glazing/img_warm.png" alt="#">
      <ul>
        <li>Конструктивная толщина профиля: 58-78 м</li>
        <li>Остекление: однокамерные и двухкамерные стеклопакеты</li>
        <li>Теплоизоляция: 0,63 - 1,05 м<sup>2</sup> * С/Вт</li>
        <li>Звукоизоляция: до 5 класса</li>
      </ul>
    </div> 
    <div class="glazing_price">
      <p>4000 руб.кв.м.<br><span>под ключ с установкой</span></p>
      <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
    </div>
  </div>

</div> <!-- /Tree -->

<!-- Aluminum -->
<div class="row aluminum glazing-tabcontent">

  <div class="col-md-6 no-padding">
    <div class="glazing_cold">
      <h3>Холодное</h3>
      <img src="img/glazing/aluminum/cold.jpg" alt="#">
      <ul>
        <li>Конструктивная толщина 40-50 мм</li>
        <li>Остекление: полированное стекло (толщиной 4 - 5 мм)</li>
        <li>Теплоизоляция: 0,07 м<sup>2</sup> * С/Вт</li>
        <li>Звукоизоляция: 20-27 дб</li>
      </ul>
    </div> 
    <div class="glazing_price">
      <p>4000 руб.кв.м.<br><span>под ключ с установкой</span></p>
      <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
    </div>
  </div>

  <div class="col-md-6 no-padding">
    <div class="glazing_warm">
      <h3>теплое</h3>
      <img src="img/glazing/aluminum/warm.jpg" alt="#">
      <ul>
        <li>Конструктивная толщина профиля: 60-68 м</li>
        <li>Остекление: однокамерные и двухкамерные стеклопакеты</li>
        <li>Теплоизоляция: 0,63 - 1,05 м<sup>2</sup> * С/Вт</li>
        <li>Звукоизоляция: до 5 класса</li>
      </ul>
    </div> 
    <div class="glazing_price">
      <p>8000 руб.кв.м.<br><span>под ключ с установкой</span></p>
      <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
    </div>
  </div>

</div> <!-- /Aluminum -->

<!-- Plastic -->
<div class="row plastic glazing-tabcontent">

  <div class="col-md-6 col-md-offset-3 no-padding">
    <div class="glazing_warm">
      <h3>теплое</h3>
      <img src="img/glazing/plastic/warm.jpg" alt="#">
      <ul>
        <li>Конструктивная толщина профиля: 58-70 м</li>
        <li>Остекление: однокамерные и двухкамерные стеклопакеты</li>
        <li>Теплоизоляция: 0,63 - 1,05 м<sup>2</sup> * С/Вт</li>
        <li>Звукоизоляция: до 5 класса</li>
      </ul>
    </div> 
    <div class="glazing_price">
      <p>5500 руб.кв.м.<br><span>под ключ с установкой</span></p>
      <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
    </div>
  </div>

</div> <!-- /Plastic -->

<!-- French -->
<div class="row french glazing-tabcontent">

  <div class="col-md-6 no-padding">
    <div class="glazing_cold">
      <h3>Пластик</h3>
      <img src="img/glazing/french/plastic.jpg" alt="#">
      <ul>
        <li>Конструктивная толщина 58-70 мм</li>
        <li>Остекление: однокамерные и двухкамерные стеклопакеты</li>
        <li>Теплоизоляция: 0,63 - 1,05 м<sup>2</sup> * С/Вт</li>
        <li>Звукоизоляция: до 5 класса</li>
      </ul>
    </div> 
    <div class="glazing_price">
      <p>5500 руб.кв.м.<br><span>под ключ с установкой</span></p>
      <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
    </div>
  </div>

  <div class="col-md-6 no-padding">
    <div class="glazing_warm">
      <h3>Алюминий</h3>
      <img src="img/glazing/french/aluminum.jpg" alt="#">
      <ul>
        <li>Конструктивная толщина профиля: 60-68 мм</li>
        <li>Остекление: однокамерные и двухкамерные стеклопакеты</li>
        <li>Теплоизоляция: 0,63 - 1,05 м<sup>2</sup> * С/Вт</li>
        <li>Звукоизоляция: до 5 класса</li>
      </ul>
    </div> 
    <div class="glazing_price">
      <p>8000 руб.кв.м.<br><span>под ключ с установкой</span></p>
      <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
    </div>
  </div>

</div> <!-- /French -->

<!-- Rise -->
<div class="row rise glazing-tabcontent">

  <div class="col-md-6 no-padding">
    <div class="glazing_cold">
      <h3>Алюминий</h3>
      <img src="img/glazing/rise/aluminum.jpg" alt="#">
      <ul>
        <li>Конструктивная толщина 40-50 мм</li>
        <li>Остекление: полированное стекло (толщиной 4 - 5 мм)</li>
        <li>Теплоизоляция: 0,07 м<sup>2</sup> * С/Вт</li>
        <li>Звукоизоляция: 20-27 дб</li>
      </ul>
    </div> 
    <div class="glazing_price">
      <p>4000 руб.кв.м.<br><span>под ключ с установкой</span></p>
      <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
    </div>
  </div>

  <div class="col-md-6 no-padding">
    <div class="glazing_warm">
      <h3>Дерево</h3>
      <img src="img/glazing/rise/tree.jpg" alt="#">
      <ul>
        <li>Конструктивная толщина профиля: 40-42 мм</li>
        <li>Остекление: полированное стекло (толщиной 4 мм)</li>
        <li>Теплоизоляция: 0,07 м<sup>2</sup> * С/Вт</li>
        <li>Звукоизоляция: 20-27 дб</li>
      </ul>
    </div> 
    <div class="glazing_price">
      <p>8000 руб.кв.м.<br><span>под ключ с установкой</span></p>
      <button class="button glazing_price_btn text-uppercase popup_calc_btn">Рассчитать стоимость</button>
    </div>
  </div>

</div><!-- /Rise -->

P.s. взято отсюда — JavaScript переключаемые вкладки - табы (и немного CSS)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.