Question

在我的网页中，有一个包含3个标签的标签功能。在页面加载时，我希望第一个选项卡及其相关内容具有焦点，并设置样式，就像用户已选择它一样。

选项卡的HTML“代码段”是在CMS> CKEditor WYSIWYG中管理的。我可以将源代码添加到此编辑器中，包括JS，但是我无法编辑基础页面的源代码（就是这样）。

“ JS”标签代码是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标签的代码）

第一个标签页未关注页面加载

0 个答案: