0

それぞれがidとクラスを持ついくつかのdiv要素を含む次のhtmlファイルがあります。タブと各タブに割り当てられたページを作成しました。問題は、各親 div をループして、子 div の表示を別のクラスに設定し、クリックしたタブの背景を変更することです。

私は次のことを試しました：

 function MakeActiveTab(CurrentPage, CurrentTab)
  {
    $('#PageID').children().filter(".pageParagraph").css('display','none');
    $('#PageID').children().filter("#" + CurrentPage).css('display', 'block');
    $('#Mainmenu').children().filter(".TabClass").css('background', '#fff');
    $('#Mainmenu').children().filter("#" + CurrentTab).css('background', '#007700;');
  }

しかし、うまくいきません！どんなアイデアでも大歓迎です。

 <div id='Mainmenu'>
   <div id='menu1' class='TabClass'>
    Tab1
   </div>
   <div id='menu2' class='TabClass'>
    Tab2
   </div>

  </div>

 <div id='PageID'>
       <div id='page1' class='pageParagraph'>
         some content
       </div>

       <div id='page2' class='pageParagraph'>
         some content
       </div>
 </div>

ページとメニューを親 div に動的に作成する JavaScript 関数を作成しました。現在のタブを取得できないことを除いて、それは正常に機能しています。JavaScriptでそれを行ったとき、それは機能しましたが、IE8では機能しませんでした。

4

2 に答える 2

0

HTML:

<div class="page first-page-name">
    page 1
    <div class="tab first-tab-name">tab 1</div>
    <div class="tab second-tab-name">tab 2</div>
</div>
<div class="page second-page-name">
    page 2
    <div class="tab first-tab-name">tab 1</div>
    <div class="tab second-tab-name">tab 2</div>
</div>

JS:

function showTabOnPage(tab, page) {
    $('.page').hide().siblings(page).show();
    $('.tab').hide().siblings(tab).show();
}
showTabOnPage('.first-tab-name', '.second-page-name');

デモをご覧ください: http://jsfiddle.net/vpetrychuk/3WtyF

ページの構造が同じでない場合は、申し訳ありません。しかし、一般的な考え方が明確になることを願っています。

于 2013-03-23T18:37:27.777 に答える
0

それを回避する方法を見つけました。ありがとう。

   refID = document.getElementById('Mainmenu').childNodes;
            for (i = 0; i < refID.length; i++)
            {
                if (refID[i].id == 'TabClass' + objID)
                {
                    MakeActiveTab("TabClass" + objID, "pageParag" + objID);

                    return 0;
                }
            }

それが魔法です！

于 2013-03-23T19:46:54.233 に答える