БЛОГ НА HUSL


Как сделать "кнопку" всегда активной при заходе на страницу?

Автор вопроса: Wolfach

В общем, у меня есть кнопочки, которые переключают два div'a. И мне нужно, чтобы одна кнопка была прожата с самого начала, то-есть был открыт один из div'ов. Вот так должно выглядеть:введите сюда описание изображения

А вот как выглядит сейчас: введите сюда описание изображения

Я попробовал много разных способов, но поскольку я только начинаю, то мне довольно сложно. Хотелось бы попросить помощи знающих людей.

window.onload = function() {
      document.getElementById("bt").click();
      alert('Кнопка')

};
> .table_members{
          width: 500px;
          height: 750px;
        }
        .tm_scroll{
          display: flex;
              margin-left: 30px;
                  height: 40px;
        }
        .tm_list{
          margin-left: 20px;
        }
        .tm_list:hover{
          border-bottom-color: #fec356;
          border-bottom-style: solid;
          border-bottom-width: 3px;
        }
        .tm_list:nth-child(1-2){
          border-bottom-color: #fec356;
          border-bottom-style: solid;
          border-bottom-width: 3px;
        }
        .tm_list a{
          color: gray;
          font-size: 20px;
          text-decoration: none;
          font-weight: bold;
        }
        .tm_table{
          margin-top: 3px;
          margin-left: 50px;
            width: 500px;
            height: 750px;
            border-color: #ab0f0f;
            border-style: solid;
            border-width: 3px;
        }
        .tm_table_2{
          margin-top: 3px;
          margin-left: 50px;
            width: 500px;
            height: 950px;
            border-color: #ab0f0f;
            border-style: solid;
            border-width: 3px;
        }
        .tm_table_title{
          display: flex;
            background: #ab0f0f;
            height: 50px;
            width: 500px;
            align-items: center;
            justify-content: center;
            color: white;
        }
        .tm_table_secondarytitle{
          margin-top: 1px;
        display: flex;
        background: #fec356;
        height: 40px;
        width: 499px;
        align-items: center;
        justify-content: center;
        color: black;
        }
        .leader_image img{
          border-color: #fec356;
            border-width: 3px;
            border-style: double;
        }
        .leader_image{
          padding-top: 25px;
        justify-content: center;
        display: flex;
        }
        .tm_table_vice{
          margin-top: 1px;
        display: flex;
        background: #fec356;
        height: 40px;
        width: 499px;
        align-items: center;
        justify-content: center;
        color: black;
        margin-top: 15px;
        }
        #viewFirstMenu:target > #viewSecondMenu{
          display: none;
        }
        #viewSecondMenu{
          display: none;
        }
        #viewSecondMenu:target{
          display: block;
        }
        #viewSecondMenu:target > #viewFirstMenu{
          display: none;
        }
        #viewFirstMenu{
          display: none;
        }
        #viewFirstMenu:target{
          display: block;
        }
        .nickname{
          position: absolute;
        display: flex;
        margin-top: 115px;
        margin-left: 60px;
        color: #fec356;
        background-color: black;
        }
<div class="table_members">
                <div class="tm_scroll">
                  <div id="bt" class="tm_list">
                    <a href="#viewFirstMenu">Первое поколение</a>
                  </div>
                  <div id="bt" class="tm_list">
                    <a href="#viewSecondMenu">Второе поколение</a>
                  </div>
                </div>
                <div class="tm_table" id="viewFirstMenu">
                  <div class="tm_table_title">
                    <h2>Анимант</h2>
                  </div>
                  <div class="tm_table_secondarytitle">
                    <h2>Глава</h2>
                  </div>
                  <div class="leader_image">
                    <img src="464.png" alt="">
                    <div class="nickname">
                      DizzMant
                    </div>
                  </div>
                  <div class="tm_table_vice">
                    <h2>Администратор</h2>
                  </div>
                  <div class="leader_image">
                    <img src="wlf.png" alt="">
                    <div class="nickname">
                      Wolfach
                    </div>
                  </div>
                  <div class="tm_table_vice">
                    <h2>Старший модератор</h2>
                  </div>
                  <div class="leader_image">
                    <img src="vf.png" alt="">
                    <div class="nickname">
                      Vitya.Fox
                    </div>
                  </div>
                </div>
            <div class="tm_table_2" id="viewSecondMenu">
              <div class="tm_table_title">
                <h2>Анимант</h2>
              </div>
              <div class="tm_table_secondarytitle">
                <h2>Глава</h2>
              </div>
              <div class="leader_image">
                <img src="464.png" alt="">
                <div class="nickname">
                  DizzMant
                </div>
              </div>
              <div class="tm_table_vice">
                <h2>Администратор</h2>
              </div>
              <div class="leader_image">
                <img src="wlf.png" alt="">
                <div class="nickname">
                  Wolfach
                </div>
              </div>
              <div class="tm_table_vice">
                <h2>Старший модератор</h2>
              </div>
              <div class="leader_image">
                <img src="vf.png" alt="">
                <div class="nickname">
                  Vitya.Fox
                </div>
              </div>
              <div class="tm_table_vice">
                <h2>Известные члены</h2>
              </div>
              <div class="leader_image">
                <img src="question.png" alt="">
                <div class="nickname">
                  Nesta
                </div>
              </div>
            </div>
          </div>


Источник

Ответы (2 шт):

Автор решения: ksa

Вот такой вариант сработает

Вот только у тебя есть элементы с одинаковыми ИД. Так лучше не делать. Поскольку при обращении по ИД к элементу будет выбран первый элемент.

window.onload = function() {
  document.querySelector("#bt a").click();
};
>.table_members {
  width: 500px;
  height: 750px;
}

.tm_scroll {
  display: flex;
  margin-left: 30px;
  height: 40px;
}

.tm_list {
  margin-left: 20px;
}

.tm_list:hover {
  border-bottom-color: #fec356;
  border-bottom-style: solid;
  border-bottom-width: 3px;
}

.tm_list:nth-child(1-2) {
  border-bottom-color: #fec356;
  border-bottom-style: solid;
  border-bottom-width: 3px;
}

.tm_list a {
  color: gray;
  font-size: 20px;
  text-decoration: none;
  font-weight: bold;
}

.tm_table {
  margin-top: 3px;
  margin-left: 50px;
  width: 500px;
  height: 750px;
  border-color: #ab0f0f;
  border-style: solid;
  border-width: 3px;
}

.tm_table_2 {
  margin-top: 3px;
  margin-left: 50px;
  width: 500px;
  height: 950px;
  border-color: #ab0f0f;
  border-style: solid;
  border-width: 3px;
}

.tm_table_title {
  display: flex;
  background: #ab0f0f;
  height: 50px;
  width: 500px;
  align-items: center;
  justify-content: center;
  color: white;
}

.tm_table_secondarytitle {
  margin-top: 1px;
  display: flex;
  background: #fec356;
  height: 40px;
  width: 499px;
  align-items: center;
  justify-content: center;
  color: black;
}

.leader_image img {
  border-color: #fec356;
  border-width: 3px;
  border-style: double;
}

.leader_image {
  padding-top: 25px;
  justify-content: center;
  display: flex;
}

.tm_table_vice {
  margin-top: 1px;
  display: flex;
  background: #fec356;
  height: 40px;
  width: 499px;
  align-items: center;
  justify-content: center;
  color: black;
  margin-top: 15px;
}

#viewFirstMenu:target>#viewSecondMenu {
  display: none;
}

#viewSecondMenu {
  display: none;
}

#viewSecondMenu:target {
  display: block;
}

#viewSecondMenu:target>#viewFirstMenu {
  display: none;
}

#viewFirstMenu {
  display: none;
}

#viewFirstMenu:target {
  display: block;
}

.nickname {
  position: absolute;
  display: flex;
  margin-top: 115px;
  margin-left: 60px;
  color: #fec356;
  background-color: black;
}
<div class="table_members">
  <div class="tm_scroll">
    <div id="bt" class="tm_list">
      <a href="#viewFirstMenu">Первое поколение</a>
    </div>
    <div id="bt" class="tm_list">
      <a href="#viewSecondMenu">Второе поколение</a>
    </div>
  </div>
  <div class="tm_table" id="viewFirstMenu">
    <div class="tm_table_title">
      <h2>Анимант</h2>
    </div>
    <div class="tm_table_secondarytitle">
      <h2>Глава</h2>
    </div>
    <div class="leader_image">
      <img src="464.png" alt="">
      <div class="nickname">
        DizzMant
      </div>
    </div>
    <div class="tm_table_vice">
      <h2>Администратор</h2>
    </div>
    <div class="leader_image">
      <img src="wlf.png" alt="">
      <div class="nickname">
        Wolfach
      </div>
    </div>
    <div class="tm_table_vice">
      <h2>Старший модератор</h2>
    </div>
    <div class="leader_image">
      <img src="vf.png" alt="">
      <div class="nickname">
        Vitya.Fox
      </div>
    </div>
  </div>
  <div class="tm_table_2" id="viewSecondMenu">
    <div class="tm_table_title">
      <h2>Анимант</h2>
    </div>
    <div class="tm_table_secondarytitle">
      <h2>Глава</h2>
    </div>
    <div class="leader_image">
      <img src="464.png" alt="">
      <div class="nickname">
        DizzMant
      </div>
    </div>
    <div class="tm_table_vice">
      <h2>Администратор</h2>
    </div>
    <div class="leader_image">
      <img src="wlf.png" alt="">
      <div class="nickname">
        Wolfach
      </div>
    </div>
    <div class="tm_table_vice">
      <h2>Старший модератор</h2>
    </div>
    <div class="leader_image">
      <img src="vf.png" alt="">
      <div class="nickname">
        Vitya.Fox
      </div>
    </div>
    <div class="tm_table_vice">
      <h2>Известные члены</h2>
    </div>
    <div class="leader_image">
      <img src="question.png" alt="">
      <div class="nickname">
        Nesta
      </div>
    </div>
  </div>
</div>

→ Ссылка
Автор решения: Armen 

//берем div-ы через class
const divOne = document.querySelector('.div1')
const divTwo = document.querySelector('.div2')

//берем кнопки через class
const firstBtn = document.querySelector('.firstButton')
const secondBtn = document.querySelector('.secondButton')

//добавляем слушатель событий на первую кнопку
firstBtn.addEventListener('click', () => {
  divOne.classList.add('show')
  divOne.classList.remove('hide')

  divTwo.classList.add('hide')
  divTwo.classList.remove('show')
})

//добавляем слушатель событий на вторую кнопку
secondBtn.addEventListener('click', () => {
  divOne.classList.add('hide')
  divOne.classList.remove('show')

  divTwo.classList.add('show')
  divTwo.classList.remove('hide')
})

//если начал изучать недавно, прочитай https://learn.javascript.ru/

//в главе Браузер: документ, события, интерфейсы, можно найти все что нужно для работы с html через js
.div1 {
  width: 100px;
  height: 100px;
  background-color: red;
  display: block;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: blue;
  display: none;
}

.hide {
  display: none;
}

.show {
  display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button class="firstButton">first</button>
  <button class="secondButton">second</button>
  <div class="div1">1</div>
  <div class="div2">2</div>
</body>
</html>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.