Табы с картинкой и ссылкой

110

07 января 2021, 00:20

Помогите пожалуйста решить вопрос с табами. При навешивание 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 -->

Answer 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 -->

Answer 2

@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)

Создание Интернет магазина Ивано-Франковск

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Изменения значения select

Есть форма, в ней сотрудник вводит данные, в конце нажимает на кнопку и создаетсяhtm файл

106

javascript

Как добавить класс элементу Vue.js

я свсем новичек в vue, столкнулся с маленькой проблемой, буду рад любой помощиЯ использую библиотеку vue-scrollto, в документации нашел описаный...

174

javascript

как создать canvas с градиентом

Ка сделать так чтобы по ид создавались новые canvas в зависимости от текста то есть Внутри canvas прозрачный цвет только граница с градиентом нужна

137

javascript

Показать скрыть div по очереди

не могу разобраться как по очереди закрывать и открывать блок, ниже код который только закрывает все блоки и меняет клас у span, что-бы поменять...

103