只顯示要點擊的標籤的內容

我想要使用標籤導航，並基於哪個標籤點擊，我需要顯示基於該標籤的內容並隱藏屬於其他標籤的內容。我已經包括選項卡部分，內部HTML標籤內容去和JavaScript來做到這一點。沒有工作，任何想法我失蹤？只顯示要點擊的標籤的內容

<ul class="wui-tab-nav"> 
    <li class="wui-first"><a class="wui-link" href="index.html">Home </a></li> 
    <li class="wui-sub" id="vol"><a class="wui-link" href="#Vol" rel="tabs1">Business Volume </a></li> 
    <li class="wui-sub"><a class="wui-link" href="#Vol2" rel="tabs2">Infras Volume</a></li> 
    <li class="wui-sub"><a class="wui-link" href="#Vol3" rel="tabs3" >Database Volume</a></li> 
    <li class="wui-sub"><a class="wui-link" href="#Vol4" rel="tabs4">Customer Volume</a></li> 
</ul>

股利部分頁面標籤部分把標籤內容

<DIV id=chart class=wui-inpage-container style="float:left; display: block; overflow: hidden; padding:0; margin:0 auto; border:0;"> 
    <ul class="tab-content" id="tabs1"> 
      <li id="business_vol1"></li> 
      <li id="business_vol2"></li> 
      <li id="business_vol3"></li> 
      <li id="business_vol4"></li>  
    </ul> 

    <ul class="tab-content" id="tabs2"> 
      <li id="Infras1"></li> 
      <li id="Infras2"></li> 
      <li id="Infras3"></li>      
    </ul> 
</DIV>

的JavaScript，只顯示點擊標籤內容

<script type="text/javascript"> 
    $(document).ready(function() { 

     $('.wui-link a').click(function() { 
      switch_tabs($(this)); 
     }); 

     switch_tabs($('#vol')); 

    }); 
</script> 

<script type="text/javascript"> 
    function switch_tabs(obj) { 
     $('.tab-content').hide(); 
     $('.tab-content a').removeClass("selected"); 
     var id = obj.attr("rel"); 

     $('#' + id).show(); 
     obj.addClass("selected"); 
    } 
</script>

來源

2013-02-27 user1471980

你正在運行#vol的第一個迭代，它不是<A>，而是包含div。此div #vol沒有rel =「」來完成此功能。

否則，它看起來沒問題。也許會提醒一些alert（）以確保您在某些中斷點獲得正確的數據。

變化：

switch_tabs($('#vol'));

要：

switch_tabs($('.wui-link:first'));

和測試

來源

2013-02-27 21:22:15

，這是行不通的 – user1471980 2013-02-27 21:33:15

這是幾個錯誤之一，我會稍後再看看。 Ross Joo的回答也是另一個錯誤，即使這些修復程序不起作用，這兩個修復程序也應該保持糾正。 – 2013-03-01 16:20:55

可以使功能隱藏所有div的內容（jQuery.hide（）），然後點擊li，你會調用jquery .show（）函數來顯示div與角蛋白ID。然後點擊另一個li，你需要再次隱藏所有內容並只顯示一個div。希望我幫你

來源

2013-02-27 21:18:10

我想我已經這樣做了，但沒有工作。 – user1471980 2013-02-27 21:20:29

嘗試在螢火蟲中運行，無論你是否有一些錯誤，也嘗試寫入控制檯的變種編號 – 2013-02-27 21:23:15

變化

$('.wui-link a').click()

到

$('a.wui-link').click()

來源

2013-02-27 21:33:38

也沒有工作。 – user1471980 2013-02-27 21:40:46

只顯示要點擊的標籤的內容

回答

相關問題