0

changeTab(num)関数を使用して、li 要素の ID を から に変更したり、number選択selectedしたタブの ID をデフォルトの番号に戻したりすることはできないようです。1回か2回しか作動せず、その後停止します。私の目標は、たとえば Chrome タブのように、選択されたタブと選択されていないタブの変更を模倣することです。

<ul id="nav">
                    <li onClick="changeTab(1);" id="1"><a  href="#">Nav 1</a></li>
                    <li onClick="changeTab(2);" id="2"><a  href="#">Nav 2</a></li>
                    <li onClick="changeTab(3);" id="selected"><a href="#">Nav 3</a></li>
                    <li onClick="changeTab(4);" id="4"><a  href="#">Nav 4</a></li>
</ul>

私のJavaScriptコードは次のとおりです。

function changeTab(num){

    switch(num){
        case 1:
            document.getElementById("selected").id = "1";
            break;
        case 2:
            document.getElementById("selected").id = "2";
            break;
        case 3:
            document.getElementById("selected").id = "3";
            break;
        case 4:
            document.getElementById("selected").id = "4";
            break;
        default:
            document.getElementById("selected").color = "";
    }


    //
    document.getElementById(num).id = "selected";
4

1 に答える 1

2

これが有効なHTMLであるためにWTKが提案したように（上記の質問のコメントとして）編集します。ID値は数字ではなく文字で始まる必要があります... IDの前に。を付けることで、回答を有効なHTMLに更新しましたnav-。 ..

<ul id="nav">
    <li onclick="changeTab(this);" id="nav-1"><a  href="#">Nav 1</a></li>
    <li onclick="changeTab(this);" id="nav-2"><a  href="#">Nav 2</a></li>
    <li onclick="changeTab(this);" id="selected"><a href="#">Nav 3</a></li>
    <li onclick="changeTab(this);" id="nav-4"><a  href="#">Nav 4</a></li>
</ul>

onclickハンドラー内で変数を使用するthisと、クリックされている要素が取得されます...次に、ハンドラーとして次の関数を使用できます...

function changeTab(el) {
  // This function is passed 'el' from the onclick handler of the li. The
  // onclick handler passes 'this' through as the 'el' argument. 'el' will 
  // be a HTMLElement object. 

  // We only want to do something if the 'el' HTMLElement object does not
  // currently have the 'id' "selected", otherwise we do nothing.
  if(el.id != "selected") {
    // Revert all tabs to their original ids

    // Try and find the HTMLElement with the id "nav". The variable 'nav'
    // will be another HTMLElement object, this time representing the ul element.
    var nav = document.getElementById("nav");

    // The function 'getElementsByTagName' always returns a 
    // HTMLElementCollection, it might have zero elements if there were no
    // matches. We can use it as an array (although there are things to
    // take into consideration that affect performance). The 
    // HTMLElementCollection will contain all li elements that are 
    // descendants of the 'nav' ul element
    var lis = nav.getElementsByTagName("li");

    // Here we do a for-loop to iterate through the element collection
    // each item in the HTMLElementCollection will be a HTMLElement
    // representing one of the li elements
    for(var i = 0; i < lis.length; ++i) { // Arrays are zero-indexed

      // We set the id to nav-n overwriting whatever was there previously
      lis[i].id = "nav-" + (i + 1); // Our tabs are one-indexed
    }

    // Set the id for the original HTMLElement that was passed into the
    // function to "selected", we do this step last as one of the li HTMLElements
    // we change in the for-loop above will also be this HTMLElement
    el.id = "selected";
  }
}

これを行うには、他にも、おそらくもっと良い方法があります。これで問題は解決するはずですが、もっと深く掘り下げたい場合は、Pro JavaScriptDesignPatternsという本をお勧めします。

于 2012-10-08T12:56:28.377 に答える