jquery更改显示模式

我有以下html文件，其中包含一些div元素，每个元素都有id和class。我创建了分配给每个选项卡的选项卡和页面。问题在于循环遍历每个父div，将子div的显示设置为不同的类，并使单击的选项卡更改它的背景。jquery更改显示模式

我试过如下：

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上。

来源

2013-03-23 Peter

“但它不起作用！”你可以创建一个演示问题的小提琴吗？ – 2013-03-23 18:29:58

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-23 18:37:27

因此，这不是我的结构，它不工作。 – Peter 2013-03-23 18:59:11

找到了一个方法。谢谢。

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

这就是majic！

来源

2013-03-23 19:46:54 Peter

jquery更改显示模式

回答

相关问题