在单个页面上使用此.js 2 次时，它仅适用于一个实例

When using this .js 2 times on a single page it only works in the one instance

本文关键字：适用于 实例 一个 次时 单个页 js      更新时间：2023-09-26

此脚本在文本区域上方创建菜单选项卡。如果仅在页面上使用一次，则该脚本有效，但是我需要在单个页面上使用它两次，以创建 2 个文本区域，每个文本区域上方都有一个菜单。一旦我使用它两次，只有一个实例有效。任何建议。

window.onload=function() {
  // get tab container
  var container = document.getElementById("tabContainer");
    // set current tab
    var navitem = container.querySelector(".tabs ul li");
    //store which tab we are on
    var ident = navitem.id.split("_")[1];
    navitem.parentNode.setAttribute("data-current",ident);
    //set current tab with class of activetabheader
    navitem.setAttribute("class","tabActiveHeader");
    //hide two tab contents we don't need
    var pages = container.querySelectorAll(".tabpage");
    for (var i = 1; i < pages.length; i++) {
      pages[i].style.display="none";
    }
    //this adds click event to tabs
    var tabs = container.querySelectorAll(".tabs ul li");
    for (var i = 0; i < tabs.length; i++) {
      tabs[i].onclick=displayPage;
    }
}
// on click of one of tabs
function displayPage() {
  var current = this.parentNode.getAttribute("data-current");
  //remove class of activetabheader and hide old contents
  document.getElementById("tabHeader_" + current).removeAttribute("class");
  document.getElementById("tabpage_" + current).style.display="none";
  var ident = this.id.split("_")[1];
  //add class of activetabheader to new active tab and show contents
  this.setAttribute("class","tabActiveHeader");
  document.getElementById("tabpage_" + ident).style.display="block";
  this.parentNode.setAttribute("data-current",ident);
}

>还没有找到解决方案，但仅供参考，您最初将其标记为jQuery，如果它是jquery，您可以轻松地中断该代码的几行并编写为：（取决于版本）

function displayPage(e) {
    var current = $(this).parent().attr("data-current");
    $("#tabHeader_" + current).removeClass("tabActiveHeader")
    $("#tabpage_" + current).hide();
    var ident = this.id.split("_")[1];
    $(this).addClass("tabActiveHeader");
    $("#tabpage_" + ident).show();
    $(this).parent().attr({ 'data-current': ident })
}
$(function() {
    var container = $("#tabContainer"),
        navitem = container.find((".tabs ul li")).first(),
        ident = navitem[0].id.split("_")[1];
    navitem.addClass("tabActiveHeader").parent().attr({ 'data-current': ident });
    $(".tabpage").filter(function(i) { return i>0; }).hide();
    // OR
    // $(".tabpage:not(:first-child)").hide();
    $(".tabs ul li").on("click", displayPage)
});​

请参阅此 jsFiddle 中先前 jQUERY 的工作示例

另外，你看过jQueryUI.Tabs吗？

不要硬设置window.onload（将最后一个设置处理程序替换为新处理程序），而是使用以下代码为同一对象上的同一事件注册任意数量的事件处理程序：

window.addEventListener('load',function(){
  // Your code here
},false);

更多关于element.addEventListener，特别是IE支持的信息

这不适用于旧版本的IE;如果您需要此支持，我强烈建议使用像jQuery这样的跨浏览器库。您最初将问题标记为与 jQuery 相关，但代码中没有使用 jQuery。

相关文章：