Блог

На моей веб-странице есть функция вкладок, содержащая 3 вкладки. При загрузке страницы я хочу, чтобы первая вкладка и связанное с ней содержимое были в фокусе и оформлены так, как если бы пользователь выбрал их.

HTML-«фрагмент» для вкладок управляется в CMS > CKEditor WYSIWYG. Я могу добавить исходный код в этот редактор, включая JS, но я не могу редактировать исходный код базовой страницы (это то, что есть).

Код JS tabs — это вызов в Head.

Код работает как отдельная страница, т. Е. при загрузке страница отображается с первой вкладкой и ее содержимым в фокусе. Однако при рендеринге через CMS отображаются три вкладки, ни одна из которых (и содержимое) не находится в фокусе. Вкладки работают, когда пользователь взаимодействует с интерфейсом.

html-код:

 <li class="tablinks" id="defaultOpen" onclick="switchView('economicSustainability'); myFunctionEconomic(); openTab(event, 'tab1')">One</li>
<li class="tablinks" onclick="switchView('customerFocus'); myFunctionCustomer(); openTab(event, 'tab2')">Two</li>
<li class="tablinks" onclick="switchView('customerFocus'); myFunctionSource(); openTab(event, 'tab3')">Three</li>
<div id="tab1" class="tabcontent">
    <div id="economicDiv">Content here</div>
</div>
<div id="tab2" class="tabcontent">
    <div id="customerDiv">Content here</div>
</div>
<div id="tab3" class="tabcontent">
    <div id="sourceDiv">Content here</div>
</div>
  

Код JS:

 function openTab(evt, tabName) {
  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(tabName).style.display = "block";
  evt.currentTarget.className  = " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
  

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

(редактировать: я только что узнал, что при необходимости я могу обновить код JS tabs)