0

Помогите правивльно адаптировать блок. Конкретно с ним какие-то проблемы у меня возникают, всё очень едет стоит поменять разрешения хоть на один пиксель. Не хочется писать медиазапросы под каждый такой случай, уж слишком много и муторно получится. Кажется, что можно это сделать как-то проще, только не знаю как

function openTab(evt, tabsName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabsName).style.display = "block";
  evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
.work {
  margin-top: 60px;
  padding-bottom: 60px;
}

.work__inner {
  padding-bottom: 50px;
}


/*tabs*/

.work__tabs {
  float: left;
  border: 2px solid #68bec4;
  background-color: #fff;
  width: 30%;
  min-height: 450px;
}

.work::after {
  content: " ";
  display: table;
  clear: both;
}

.work__tabs button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 17px;
}

.work__tabs button:hover {
  text-decoration: underline;
}

.work__tabs button.active {
  background-color: #68bec4;
  color: #fff;
}

.tabcontent {
  float: left;
  padding: 65px 34px;
  border: 2px solid #68bec4;
  width: 70%;
  border-left: none;
  min-height: 451px;
  font-size: 20px;
}

.tabcontent p {
  padding-bottom: 23px;
  max-width: 89%;
}
<section class="work">
  <div class="container">
    <div class="work__inner">
      <h2 class="work__inner-title title">Порядок работы</h2>
    </div>
    <div class="work__inner-tabs">
      <div class="work__tabs">
        <button class="tablinks" onclick="openTab(event, 'tab1')" id="defaultOpen">1. Получение ирд</button>
        <button class="tablinks" onclick="openTab(event, 'tab2')">2. Проектирование</button>
        <button class="tablinks" onclick="openTab(event, 'tab3')">3. Сопровождение</button>
        <button class="tablinks" onclick="openTab(event, 'tab4')">4. Разрешение на строительство</button>
        <button class="tablinks" onclick="openTab(event, 'tab5')">5. Строительство</button>
        <button class="tablinks" onclick="openTab(event, 'tab6')">6. Исполнительная документация</button>
        <button class="tablinks" onclick="openTab(event, 'tab7')">7. Ввод в эксплуатацию</button>
      </div>

      <div id="tab1" class="tabcontent">
        <p>Исходно-разрешительная документация</p>

        <p> ИРД - документация, выдаваемая специальными организациями (за фиксированную плату и в обязательном порядке) по запросу Застройщика (собственника или арендатора), либо действующего в его интересах лица. Получение ИРД необходимо для строительства,
          реконструкции, технического перевооружения и капитального ремонта зданий и сооружений, и происходит до начала проектирования.
        </p>
        <p>
          Получение исходно-разрешительной документации может осуществляться Заказчиком, либо наша компания сама может получить за Вас всю ИРД.
        </p>
      </div>
      <div class="tabs-content">
        <div id="tab2" class="tabcontent">
          <p>допустим, мяу</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, laudantium suscipit voluptatibus modi, blanditiis quidem sed itaque eius tempora nobis illum excepturi nemo facilis asperiores cum, quam quis exercitationem adipisci.</p>

          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, quas perspiciatis. Corporis earum recusandae accusamus vero dolore, ut commodi nostrum ratione et quos. Veniam blanditiis hic quisquam voluptatum unde delectus.</p>
        </div>

        <div id="tab3" class="tabcontent">
          <p>допустим, гав</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, laudantium suscipit voluptatibus modi, blanditiis quidem sed itaque eius tempora nobis illum excepturi nemo facilis asperiores cum, quam quis exercitationem adipisci.</p>

          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, quas perspiciatis. Corporis earum recusandae accusamus vero dolore, ut commodi nostrum ratione et quos. Veniam blanditiis hic quisquam voluptatum unde delectus.</p>
        </div>
        <div id="tab4" class="tabcontent">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, laudantium suscipit voluptatibus modi, blanditiis quidem sed itaque eius tempora nobis illum excepturi nemo facilis asperiores cum, quam quis exercitationem adipisci.</p>

          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, quas perspiciatis. Corporis earum recusandae accusamus vero dolore, ut commodi nostrum ratione et quos. Veniam blanditiis hic quisquam voluptatum unde delectus.</p>
        </div>
        <div id="tab5" class="tabcontent">
          <p>не допустим</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, laudantium suscipit voluptatibus modi, blanditiis quidem sed itaque eius tempora nobis illum excepturi nemo facilis asperiores cum, quam quis exercitationem adipisci.</p>

          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, quas perspiciatis. Corporis earum recusandae accusamus vero dolore, ut commodi nostrum ratione et quos. Veniam blanditiis hic quisquam voluptatum unde delectus.</p>
        </div>
        <div id="tab6" class="tabcontent">
          <p>ня</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, laudantium suscipit voluptatibus modi, blanditiis quidem sed itaque eius tempora nobis illum excepturi nemo facilis asperiores cum, quam quis exercitationem adipisci.</p>

          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, quas perspiciatis. Corporis earum recusandae accusamus vero dolore, ut commodi nostrum ratione et quos. Veniam blanditiis hic quisquam voluptatum unde delectus.</p>
        </div>
        <div id="tab7" class="tabcontent">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem, laudantium suscipit voluptatibus modi, blanditiis quidem sed itaque eius tempora nobis illum excepturi nemo facilis asperiores cum, quam quis exercitationem adipisci.</p>

          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, quas perspiciatis. Corporis earum recusandae accusamus vero dolore, ut commodi nostrum ratione et quos. Veniam blanditiis hic quisquam voluptatum unde delectus.</p>
        </div>
      </div>
    </div>
  </div>
</section>

1 ответ 1

1

class Tab {
  constructor(options) {

    if (options.tabHead.length !== options.tabBody.length) {
      console.error('Длина массивов должна быть одинаковая');
      return false;
    }

    const selector = options.selector;
    this.tabDom = (typeof selector === 'string') ? document.querySelector(selector) : selector;
    this.tabHead = options.tabHead;
    this.tabBody = options.tabBody;
    this.defaultOpenTab = options.defaultOpenTab;

    this.createText();
    this.insertToDom();
    this.addEventListeners();
  }

  createText() {
    const tabHeadText = this.tabHead.map((item, i) => {
      const active = (this.defaultOpenTab - 1 === i) ? 'active' : '';
      return `<div class="tab__head__item ${ active } ">${ item }</div>\n`;
    }).join('');

    const tabBodyText = this.tabBody.map((item, i) => {
      const active = (this.defaultOpenTab - 1 === i) ? 'active' : '';
      return `<div class="tab__body__item ${ active } ">${ item }</div>\n`;
    }).join('');

    this.tabHeadAndBodyText = `
      <div class="tab__head__container">
        ${tabHeadText}
      </div>
      <div class="tab__body__container">
        ${tabBodyText}
      </div>
    `;
  }

  insertToDom() {
    this.tabDom.innerHTML = '';
    this.tabDom.insertAdjacentHTML('beforeend', this.tabHeadAndBodyText);
  }

  addEventListeners() {
    const allTabHeadItem = Array.from(this.tabDom.querySelectorAll('.tab__head__item'));
    const allTabBodyItem = Array.from(this.tabDom.querySelectorAll('.tab__body__item'));

    allTabHeadItem.forEach((item, i) => {
      item.addEventListener('click', e => {
        allTabBodyItem.forEach(item1 => {
          if (item1.classList.contains('active')) {
            item1.style.maxHeight = 0;
          }
          item1.classList.remove('active'); 
        });
        allTabHeadItem.forEach(item1 => {
          item1.classList.remove('active');
        });
        allTabHeadItem[i].classList.add('active');
        allTabBodyItem[i].classList.add('active');
        allTabBodyItem[i].style.maxHeight = allTabBodyItem[i].scrollHeight + 'px';
      });
    });
    
    const fromResize = () => {
      const activeBodyItem = allTabBodyItem.find(item => item.classList.contains('active'));
      activeBodyItem.style.maxHeight = activeBodyItem.scrollHeight + 'px';
    }
    
    const debounceFunc = debounce(fromResize, 200);
    
    window.addEventListener('resize', debounceFunc);
  }
}

function debounce(f, t) {
  return function (args) {
    let previousCall = this.lastCall;
    this.lastCall = Date.now();
    if (previousCall && ((this.lastCall - previousCall) <= t)) {
      clearTimeout(this.lastCallTimer);
    }
    this.lastCallTimer = setTimeout(() => f(args), t);
  }
}

const tab = new Tab({
  selector: '.tabs',
  tabHead: [
    'Первый tab',
    'Второй tab',
    'Третий tab',
    'Четвертый tab'
  ],
  tabBody: [
    'Ты как меня нашёл 1',
    'Lorem ipsum dolor sit amet, consectetur, adipisicing elit. Harum repudiandae laboriosam magnam deleniti velit odit sint incidunt consectetur dicta tempore natus reprehenderit, mollitia vitae architecto, repellendus suscipit in animi quibusdam.',
    'Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст',
    'Пошли кушать'
  ],
  defaultOpenTab: 2
});
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100%;
  font-family: "Roboto", sans-serif;
}

:root {
  --transitionDuration: 0.5s;
  --transitionTimingFunction: ease-in-out;
}

section {
  padding: 40px 0;
}

.container {
  max-width: 1200px;
  display: block;
  margin: 0 auto;
  padding: 0 15px;
  width: 100%;
}

.tab__head__container {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(150px, 1fr) );
  --size: 15px;
  grid-gap: var(--size);
}

.tab__head__item {
  background-color: gray;
  color: white;
  padding: var(--size);
  cursor: pointer;
  border: 2px solid transparent;
  transition-property: border-color, background-color;
  transition-duration: var(--transitionDuration);
  transition-timing-function: var(--transitionTimingFunction);
}

.tab__head__item.active {
  border-color: red;
  background-color: #dbdb43;
}

.tab__body__container {
  margin-top: 40px;
  padding: 20px;
  border: 2px solid black;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tab__body__item {
  display: inline-block;
  max-height: 0px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: scale(0) translate(200px, 200%);
  transition-property: visibility, opacity, transform, max-height;
  transition-timing-function: var(--transitionTimingFunction);
  transition-duration: var(--transitionDuration);
}

.tab__body__item.active {
  opacity: 1;
  visibility: visible;
  max-height: 200px;
  transform: scale(1);
}

.as-console-wrapper {
  height: 0px;
  overflow: hidden;
}

@media (max-width: 300px) {
  .tab__head__container {
    grid-template-columns: 1fr;
  }
}
<section>
  <div class="container">
    <div class="tabs">

    </div>
  </div>
</section>

Вертикальные вкладки:

class Tab {
  constructor(options) {

    if (options.tabHead.length !== options.tabBody.length) {
      console.error('Длина массивов должна быть одинаковая');
      return false;
    }

    const selector = options.selector;
    this.tabDom = (typeof selector === 'string') ? document.querySelector(selector) : selector;
    this.tabHead = options.tabHead;
    this.tabBody = options.tabBody;
    this.defaultOpenTab = options.defaultOpenTab;

    this.createText();
    this.insertToDom();
    this.addEventListeners();
  }

  createText() {
    const tabHeadText = this.tabHead.map((item, i) => {
      const active = (this.defaultOpenTab - 1 === i) ? 'active' : '';
      return `<div class="tab__head__item ${ active } ">${ item }</div>\n`;
    }).join('');

    const tabBodyText = this.tabBody.map((item, i) => {
      const active = (this.defaultOpenTab - 1 === i) ? 'active' : '';
      return `<div class="tab__body__item ${ active } ">${ item }</div>\n`;
    }).join('');

    this.tabHeadAndBodyText = `
      <div class="tab__head__container">
        ${tabHeadText}
      </div>
      <div class="tab__body__container">
        ${tabBodyText}
      </div>
    `;
  }

  insertToDom() {
    this.tabDom.innerHTML = '';
    this.tabDom.insertAdjacentHTML('beforeend', this.tabHeadAndBodyText);
  }

  addEventListeners() {
    const allTabHeadItem = Array.from(this.tabDom.querySelectorAll('.tab__head__item'));
    const allTabBodyItem = Array.from(this.tabDom.querySelectorAll('.tab__body__item'));

    allTabHeadItem.forEach((item, i) => {
      item.addEventListener('click', e => {
        allTabBodyItem.forEach(item1 => {
          if (item1.classList.contains('active')) {
            item1.style.maxHeight = 0;
          }
          item1.classList.remove('active'); 
        });
        allTabHeadItem.forEach(item1 => {
          item1.classList.remove('active');
        });
        allTabHeadItem[i].classList.add('active');
        allTabBodyItem[i].classList.add('active');
        allTabBodyItem[i].style.maxHeight = allTabBodyItem[i].scrollHeight + 'px';
      });
    });
    
    const fromResize = () => {
      const activeBodyItem = allTabBodyItem.find(item => item.classList.contains('active'));
      activeBodyItem.style.maxHeight = activeBodyItem.scrollHeight + 'px';
    }
    
    const debounceFunc = debounce(fromResize, 200);
    
    window.addEventListener('resize', debounceFunc);
  }
}

function debounce(f, t) {
  return function (args) {
    let previousCall = this.lastCall;
    this.lastCall = Date.now();
    if (previousCall && ((this.lastCall - previousCall) <= t)) {
      clearTimeout(this.lastCallTimer);
    }
    this.lastCallTimer = setTimeout(() => f(args), t);
  }
}

const tab = new Tab({
  selector: '.tabs',
  tabHead: [
    'Первый tab',
    'Второй tab',
    'Третий tab',
    'Четвертый tab'
  ],
  tabBody: [
    'Ты как меня нашёл 1',
    'Lorem ipsum dolor sit amet, consectetur, adipisicing elit. Harum repudiandae laboriosam magnam deleniti velit odit sint incidunt consectetur dicta tempore natus reprehenderit, mollitia vitae architecto, repellendus suscipit in animi quibusdam.',
    'Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст Большой текст',
    'Пошли кушать'
  ],
  defaultOpenTab: 2
});
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100%;
  font-family: "Roboto", sans-serif;
}

:root {
  --transitionDuration: 0.5s;
  --transitionTimingFunction: ease-in-out;
}

section {
  padding: 40px 0;
}

.container {
  max-width: 1200px;
  display: block;
  margin: 0 auto;
  padding: 0 15px;
  width: 100%;
}

.tab__head__container {
  display: grid;
  grid-template-rows: 1fr;
  justify-content: start;
  --size: 15px;
  grid-gap: var(--size);
}

.tab__head__item {
  background-color: gray;
  color: white;
  padding: var(--size);
  cursor: pointer;
  border: 2px solid transparent;
  transition-property: border-color, background-color;
  transition-duration: var(--transitionDuration);
  transition-timing-function: var(--transitionTimingFunction);
}

.tab__head__item.active {
  border-color: red;
  background-color: #dbdb43;
}

.tab__body__container {
  margin-top: 40px;
  padding: 20px;
  border: 2px solid black;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tab__body__item {
  display: inline-block;
  max-height: 0px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: scale(0) translate(200px, 200%);
  transition-property: visibility, opacity, transform, max-height;
  transition-timing-function: var(--transitionTimingFunction);
  transition-duration: var(--transitionDuration);
}

.tab__body__item.active {
  opacity: 1;
  visibility: visible;
  max-height: 200px;
  transform: scale(1);
}

@media (max-width: 300px) {
  .tab__head__container {
    grid-template-columns: 1fr;
  }
}
<section>
  <div class="container">
    <div class="tabs">

    </div>
  </div>
</section>

2
  • это немного не то, у меня всё-таки вертикальные вкладки, с ними немного по-другому. но попробую использовать то, что вы написали
    – venus
    6 ноя 2020 в 8:56
  • @Крис обновил ответ 6 ноя 2020 в 9:17

Ваш ответ

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

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