0

このスクリプトは、テキスト領域の上にメニュー タブを作成します。スクリプトは、ページで 1 回だけ使用する場合に機能しますが、1 つのページで 2 回使用して、それぞれの上にメニューがある 2 つのテキスト領域を作成する必要があります。2回使用するとすぐに、1つのインスタンスのみが機能します。助言がありますか。

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);
}
4

2 に答える 2

2

まだ解決策を見つけていませんが、参考までに、もともとこれを 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のWORKING Exampleを参照してください

また、 jQueryUI.Tabsを見ましたか？

于 2012-04-24T22:01:10.590 に答える
1

window.onload最後に設定されたハンドラーを新しいハンドラーに置き換えるハード設定の代わりに、同じオブジェクトの同じイベントに対して任意の数のイベント ハンドラーを登録する次のコードを使用します。

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

element.addEventListenerおよび特にIE サポートに関する詳細を読むことができます

これは古いバージョンの IE では機能しません。このサポートが必要な場合は、jQuery などのクロスブラウザー ライブラリを使用することを強くお勧めします。最初に質問にjQueryに関連するタグを付けましたが、コードで使用されているjQueryはありません。

于 2012-04-24T21:44:30.353 に答える