Jquery改变显示模式

jquery change display mode

本文关键字：模式 显示 改变 Jquery      更新时间：2023-09-26

我有以下html文件，其中包含一些div元素，每个都有id和类。我创建了标签，并将页面分配给每个标签。问题是循环遍历每个父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。这是工作很好，除了我不能得到当前Tab。当我用javascript这样做时，它可以工作，但在IE8上不行。

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

如果你的页面结构不一样-对不起。但我希望你能明白我的大意。

找到了绕过它的方法。谢谢。

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

这就是魔法!

相关文章：