0

インターネットでjQueryのタブシステムを見つけましたが、それを作成した（そしてその使用を許可した）人はもう連絡が取れないので、ここでこの質問をします。

これは、さまざまなタブを管理する私の JavaScript のコードです。

window.onload=function() {​



// get tab container
  var container = document.getElementById("tabContainer");
    if (document.location.hash.length) {
        $('.tabs ul li a[href^="' + document.location.hash + '"]').click();
    }
// 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);
}

これはHTMLです：

            <div class="tabs">
            <ul>
                <li id="tabHeader_1">Les listes</li>
                <li id="tabHeader_2">Les membres</li>
            </ul>
        </div>
<div class="tabscontent">
            <div class="tabpage" id="tabpage_1">
                <h2>Les listes</h2>
                <p>Pellentesque habitant morbi tristique senectus...</p>
            </div>
            <div class="tabpage" id="tabpage_2">
                </div>

デフォルトでは、JavaScript は最初のタブ (tabHeader_1、tabpage_1) をロードします。たとえば、example.com/page.php#tabpage_2 という URL に入力すると、2 番目のタブが自動的に読み込まれます。

どうもありがとうございました。

4

1 に答える 1

0

document.location.hash番号記号 (#hash) を含むハッシュを返します。内にタグがないため、セレクターとして
も使用できません。.tabs ul li aali

使用してみてください：

var hash = document.location.hash.substr(1); // skip 1 character (the number sign)
$('.tabs ul li[id^="' + hash + '"]').click();

また、このスクリプトはin jQuery. スクリプト全体で 1 つの jQuery 関数のみを使用します。これは jQuery よりも純粋な JavaScript だと思います。

于 2013-07-18T19:53:13.583 に答える