javascript - jquery改变显示模式

Question

我有以下 html 文件，其中包含一些 div 元素，每个元素都有 id 和 class。我创建了标签和分配给每个标签的页面。问题是遍历每个父 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>

我创建了一个 javascript 函数，用于在其父 div 中动态创建页面和菜单。这工作正常，除了我无法获得当前标签。当我用 javascript 这样做时，它可以工作，但在 IE8 上不行。

Answer 1

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

如果您的页面结构不一样 - 抱歉。但我希望您能清楚总体思路。