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更改顯示模式

回答

相關問題