Проблемы с javascript для добавления класса во вкладки - PullRequest
Новая
       1

Проблемы с javascript для добавления класса во вкладки

0 голосов
/ 15 марта 2020

У меня проблемы с кнопками в примере статьи «Домой». Div i main Я добавляю кнопку в div id «Домой», вот так: 

<div id="Home" class="tabcontent visible">
<h3>Home</h3>
<p>TEXT</p>
<button class="tablink" onclick="openPage('About', this)">Go to About</button>
<p>TEXT</p>

И я хочу, чтобы пользователь нажимал на эту кнопку "Go в "О" открыть страницу (раздел) "О" И проблема, я вижу, что, когда пользователь нажимает эту кнопку, страница была открыта потрясающе, но кнопка не темно-серого цвета, я пытаюсь добавить JavaScript, когда нажимается эта кнопка "Go На странице «О программе» и кнопка «О программе» должна быть темно-серой, но у меня не работает. Я пытаюсь это: 

<button class="tablink" onclick="openPage('About', this); myscript()">Go to About</button>

<script>
function myscript(){
elmnt.classList.add('selected');
}
</script>

Теперь, когда пользователь нажимает на эту кнопку "Go в О", кнопка "О" не черно-серый.

См. Полный код: 

function openPage(pageName, elmnt) {
  document.querySelector('.tablink.selected').classList.remove('selected');
  elmnt.classList.add('selected');

  document.querySelector('.tabcontent.visible').classList.remove('visible');
  document.getElementById(pageName).classList.add('visible');
}
tablink {
  display: inline-block;
  min-width: 128px;
  font-size: 16px;
  padding: 8px;
  color: #6D6E70;
  font-weight: 500;
  text-decoration: none;
  background-color: #F2F2F2;
}

.tablink.selected {
  color: #fff;
  background-color: #6D6E70;
}

.tablink:hover {
  background-color: #777;
  color: #fff;
}


/* Style the tab content (and add height:100% for full page content) */

.tabcontent {
  color: black;
  display: none;
  padding: 100px 20px;
  height: 100%;
}

.tabcontent.visible {
  display: block;
}
<button class="tablink selected" onclick="openPage('Home', this)">1 Button</button>
<button class="tablink" onclick="openPage('News', this)">2 Button</button>
<button class="tablink" onclick="openPage('About', this)">3 Button</button>

<div id="Home" class="tabcontent visible">
  <h3>Home</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>
  <p>eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, </p>
  <p>sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p>
  <p>vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>

  <button class="tablink" onclick="openPage('About', this)">Go to About</button>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>
  <p>eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, </p>
  <p>sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p>
  <p>vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>




</div>

<div id="News" class="tabcontent">
  <h3>News</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>
  <p>eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, </p>
  <p>sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p>
  <p>vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
</div>

<div id="About" class="tabcontent">
  <h3>About</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>
  <p>eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, </p>
  <p>sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p>
  <p>vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>
  <p>eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, </p>
  <p>vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
</div>

1 Ответ

1 голос
/ 15 марта 2020

Дайте идентификаторы кнопок. Затем используйте document.getElementById(), чтобы предоставить эту кнопку в качестве второго аргумента для openPage(). 

function openPage(pageName, elmnt) {
  document.querySelector('.tablink.selected').classList.remove('selected');
  elmnt.classList.add('selected');

  document.querySelector('.tabcontent.visible').classList.remove('visible');
  document.getElementById(pageName).classList.add('visible');
}
tablink {
  display: inline-block;
  min-width: 128px;
  font-size: 16px;
  padding: 8px;
  color: #6D6E70;
  font-weight: 500;
  text-decoration: none;
  background-color: #F2F2F2;
}

.tablink.selected {
  color: #fff;
  background-color: #6D6E70;
}

.tablink:hover {
  background-color: #777;
  color: #fff;
}


/* Style the tab content (and add height:100% for full page content) */

.tabcontent {
  color: black;
  display: none;
  padding: 100px 20px;
  height: 100%;
}

.tabcontent.visible {
  display: block;
}
<button id="homebutton" class="tablink selected" onclick="openPage('Home', this)">1 Button</button>
<button id="newsbutton" class="tablink" onclick="openPage('News', this)">2 Button</button>
<button id="aboutbutton" class="tablink" onclick="openPage('About', this)">3 Button</button>

<div id="Home" class="tabcontent visible">
  <h3>Home</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>
  <p>eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, </p>
  <p>sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p>
  <p>vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>

  <button class="tablink" onclick="openPage('About', document.getElementById('aboutbutton'))">Go to About</button>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>
  <p>eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, </p>
  <p>sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p>
  <p>vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>

</div>

<div id="News" class="tabcontent">
  <h3>News</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>
  <p>eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, </p>
  <p>sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p>
  <p>vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
</div>

<div id="About" class="tabcontent">
  <h3>About</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>
  <p>eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, </p>
  <p>sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p>
  <p>vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>
  <p>eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, </p>
  <p>vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...