Вкладка по умолчанию не работает с JavaScript

Я новичок в веб-разработке и пытался создать что-то похожее на то, чему меня учили: https://www.w3schools.com/howto/howto_js_tabs.asp

Я сделал это, но проблема в том, что открытое по умолчанию не работает. В нем открыты все три содержимого вкладки вместо содержимого по умолчанию.

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

Вот код от jsbing: https://jsbin.com/qorofexofi/edit?html,css,js,output

function startTab() {
  document.getElementById("defaultOpen").click();
}

function openCity(evt, cityName) {
  var i, tabfrontpagecontent, tablinks;

  tabfrontpagecontent =
    document.getElementsByClassName("tabfrontpagecontent");
  for (i = 0; i < tabfrontpagecontent.length; i++) {
    tabfrontpagecontent[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(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

.tabfrontpage {
  left: 30%;
  right: 30%;
  width: 40%;
  top: 3px;
  padding: 3px 5px;
  position: relative;
  overflow: hidden;
  border: 3px solid #ccc;
  background-color: #f1f1f1;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.tabfrontpage ul {
  display: inline-block;
  float: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  position: relative;
  left: 50%;
  text-align: center;
}

.tabfrontpage ul li {
  position: relative;
  overflow: auto;
  right: 50%;
  background-color: inherit;
  text-align: center;
  display: inline;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.7s;
  font-size: 17px;
}

.tabfrontpage li:hover {
  background-color: #ddd;
  transition: 0.7s;
}

.tabfrontpage li.active {
  background-color: #ccc;
}

.tabfrontpagecontent {
  z-index: 10;
  background-color: #FFFFFF;
  position: relative;
  float: left;
  text-align: center;
  left: 15%;
  right: 15%;
  width: 70%;
  display: inline-block;
  padding: 6px 12px;
  border: 3px solid #ccc;
}

<div class = "tabfrontpage">
  <ul>
    <li class = "tablinks" onclick = "openCity(event, 'test11')">Test1</li>
    <li class = "tablinks" onclick = "openCity(event, 'test22')" id = "defaultOpen">Test2</li>
    <li class = "tablinks" onclick = "openCity(event, 'test33')">Test3</li>
  </ul>
</div>
<div id = "test11" class = "tabfrontpagecontent">
  </br>
  <h3>Test1Test</h3>
  <p>Test1Test test test test test test test test test.</p>
  <p>Test1Test test test test test test test test test.</p>
  <p>Test1Test test test test test test test test test.</p>
  <p>Test1Test test test test test test test test test.</p>
  <p>Test1Test test test test test test test test test.</p>
  <p>Test1Test test test test test test test test test.</p>
</div>

<div id = "test22" class = "tabfrontpagecontent">

  </br>
  <h3>Test2Test</h3>
  <p>Test2Test test test test test test test test test.</p>
  <p>Test2Test test test test test test test test test.</p>
  <p>Test2Test test test test test test test test test.</p>
  <p>Test2Test test test test test test test test test.</p>
  <p>Test2Test test test test test test test test test.</p>
  <p>Test2Test test test test test test test test test.</p>
  <p>Test2Test test test test test test test test test.</p>

</div>

<div id = "test33" class = "tabfrontpagecontent">

  </br>
  <h3>Test3Test</h3>
  <p>Test3Test test test test test test test test test.</p>
  <p>Test3Test test test test test test test test test.</p>
  <p>Test3Test test test test test test test test test.</p>
  <p>Test3Test test test test test test test test test.</p>
  <p>Test3Test test test test test test test test test.</p>
  <p>Test3Test test test test test test test test test.</p>
  <p>Test3Test test test test test test test test test.</p>
</div>

Я ценю любые ответы или помощь, которую я могу получить.

javascript css button tabs

15.08.2018 22:01

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 198

Ответы 3

С помощью jquery вы можете сделать что-то вроде этого:

$(document).ready(function(){
  $('.toggle').on('click', function() {
    if ($(this).next('.content').hasClass('active')){
      $(this).text('Show');
      $(this).next('.content').removeClass('active');
    }else{
      $('.toggle').text('Show');
      $(this).text('Hide');
      $('.content').removeClass('active');
      $(this).next('.content').addClass('active');
    }
  });
});

.content{
  display:none;
}

.active {
  display: block;
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='#container'>
  <span class='item'>1</span>
  <button type = "button" class = "toggle">Show</button>
  <div class = "content">Some 1</div>
  <hr>
  <span class='item'>2</span>
  <button type = "button" class = "toggle">Hide</button>
  <div class = "content active">Some 2</div>
  <hr>
  <span class='item'>3</span>
  <button type = "button" class = "toggle">Show</button>
  <div class = "content">Some 3</div>
</div>

Спасибо за предложение, я исправил, но в следующий раз посмотрю, как может работать этот метод jquery.

— 16.08.2018 19:25

15.08.2018 22:14

вы должны поместить идентификатор defaultOpen на вкладку, которую хотите открыть по умолчанию иначе document.getElementById не сможет его найти

<li id = "defaultOpen" class = "tablinks" onclick = "openCity(event, 'test11')">Test1</li>

и вы также должны вызвать в своем JavaScript функцию, которую вы создали startTab()

Помимо этого, ваш код работает, вот ваш пример обновленного https://jsbin.com/sipikefove/1/edit?html,js,output

Спасибо за ответ. Сначала я проверил свой код и ваш, и на самом деле особых отличий не было. Единственное отличие заключалось в том, что у вас был startTab (), который я добавил. Однако на сайте он по-прежнему не работал. Затем я увидел, что кто-то поместил java-скрипт в конец тела. Тогда это сработало. У меня был сценарий загрузки поверх заголовка. Итак, обычно загрузка javascript должна быть в конце документов, а не в начале?

— 16.08.2018 19:22

15.08.2018 22:14

Вам нужно установить свойство CSS display на none для элементов, которые вы не хотите видеть -

function startTab() {
  document.getElementById("defaultOpen").click();
}

function openCity(evt, cityName) {
  var i, tabfrontpagecontent, tablinks;

  tabfrontpagecontent =
    document.getElementsByClassName("tabfrontpagecontent");
  for (i = 0; i < tabfrontpagecontent.length; i++) {
    tabfrontpagecontent[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(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

.tabfrontpage {
  left: 30%;
  right: 30%;
  width: 40%;
  top: 3px;
  padding: 3px 5px;
  position: relative;
  overflow: hidden;
  border: 3px solid #ccc;
  background-color: #f1f1f1;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.tabfrontpage ul {
  display: inline-block;
  float: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  position: relative;
  left: 50%;
  text-align: center;
}

.tabfrontpage ul li {
  position: relative;
  overflow: auto;
  right: 50%;
  background-color: inherit;
  text-align: center;
  display: inline;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.7s;
  font-size: 17px;
}

.tabfrontpage li:hover {
  background-color: #ddd;
  transition: 0.7s;
}

.tabfrontpage li.active {
  background-color: #ccc;
}

.tabfrontpagecontent {
  z-index: 10;
  background-color: #FFFFFF;
  position: relative;
  float: left;
  text-align: center;
  left: 15%;
  right: 15%;
  width: 70%;
  display: inline-block;
  padding: 6px 12px;
  border: 3px solid #ccc;
}

<div class = "tabfrontpage">
  <ul>
    <li class = "tablinks" onclick = "openCity(event, 'test11')">Test1</li>
    <li class = "tablinks" onclick = "openCity(event, 'test22')">Test2</li>
    <li class = "tablinks" onclick = "openCity(event, 'test33')">Test3</li>
  </ul>
</div>
<div id = "test11" class = "tabfrontpagecontent" style = "display:none">
  </br>
  <h3>Test1Test</h3>
  <p>Test1Test test test test test test test test test.</p>
  <p>Test1Test test test test test test test test test.</p>
  <p>Test1Test test test test test test test test test.</p>
  <p>Test1Test test test test test test test test test.</p>
  <p>Test1Test test test test test test test test test.</p>
  <p>Test1Test test test test test test test test test.</p>
</div>

<div id = "test22" class = "tabfrontpagecontent">

  </br>
  <h3>Test2Test</h3>
  <p>Test2Test test test test test test test test test.</p>
  <p>Test2Test test test test test test test test test.</p>
  <p>Test2Test test test test test test test test test.</p>
  <p>Test2Test test test test test test test test test.</p>
  <p>Test2Test test test test test test test test test.</p>
  <p>Test2Test test test test test test test test test.</p>
  <p>Test2Test test test test test test test test test.</p>

</div>

<div id = "test33" class = "tabfrontpagecontent" style = "display:none">

  </br>
  <h3>Test3Test</h3>
  <p>Test3Test test test test test test test test test.</p>
  <p>Test3Test test test test test test test test test.</p>
  <p>Test3Test test test test test test test test test.</p>
  <p>Test3Test test test test test test test test test.</p>
  <p>Test3Test test test test test test test test test.</p>
  <p>Test3Test test test test test test test test test.</p>
  <p>Test3Test test test test test test test test test.</p>
</div>

Спасибо за ответ, в самом javascript остальные должны быть скрыты в функции. Я обнаружил, что js следует загружать в конец документа, а не в заголовок документов, и это устранило мою проблему.

— 16.08.2018 19:24

15.08.2018 22:17