加載點擊不同錨點標籤上的新數據

enter image description here 由於我對這些概念不熟悉，請不要介意是否有任何錯誤。我需要幫助。這裏所有的錨定標記都是硬編碼的，但實際上它們應該是動態創建的。我試圖顯示錨點標記的點擊數據。在這種情況下要顯示的數據是不同的。最初我們正在展示智能手機和平板電腦等設備。點擊智能手機，我們必須顯示操作系統版本，如mac，windows，andriod和與智能手機完全相關的黑莓......同樣點擊平板電腦也會顯示與平板電腦相關的這4個os版本。再次點擊操作系統版本鏈接，然後基於該操作系統，應該顯示操作系統的版本。例如：4.0 ics，4.1：jellybean等..，只有在選擇智能手機/平板電腦時，才應該顯示此OS數據。以下是我嘗試過的代碼...！ HTML：加載點擊不同錨點標籤上的新數據

<table id="layout"> 
    <tr> 
    <td> 
    <table id='download'> 
    <tr> 
    <td> 
    <div id='main'> 
    <table id='device'> 
    <tr> 
    <td> 
    <a id='mobile_select'> SmartPhone </a> 
    <div id="os_data"> 
    <a >ios</a> 
    <a >andriod</a> 
    <a >blackberry</a> 
    <a >windows</a></div> 
    </td> 
    </tr> 
    <tr> 
    <td> 
    <a> Tablet</a> 
<div id="os_data"> 
    <a >ios</a> 
    <a >andriod</a> 
    <a >blackberry</a> 
    <a >windows</a></div> 
    </td> 
    </tr> 
    </table> 
    </div> 
    </td> 
    </tr> 
    </table> 
    </td> 
    </tr> 
    </table>

jQuery的

for (var i = 0; i <= 50; i++) { 
     $('#device').append('<a + i + > ' + i + '</a>'); 
    } 

    addOS(); 

    function addOS() { 
      ii = 0; 

      for (i = 0; i <= 500; i++) { 
       if ((i % 10) == 0) { 
        ii++; 
       } 
       $('#device').append('<a + i + id="oos' + ii + '"> ' + i + '</a>'); 
      } 
     } 

    $('#mobile_select').click(function() { 
      var selectedDevice = $(this).val(); 
      var selectFirst = 0; 
      addCites(); 

      $("#device").each(function() { 
       if ($(this).attr('id') != selectedDevice) { 
        $(this).remove(); 
       } else { 
        if (selectFirst < 1) { 
         $(this).attr('id', selectedDevice).attr('selected', 'selected'); 
        } 
        selectFirst++; 
       } 
      }); 
      $("#device").parent().parent().show(); 


     });

來源

2013-04-22 user1853128

不要使用表格進行佈局。由於瀏覽器的CSS支持變得體面（即十多年以上），它們是痛苦的，並沒有被需要。 – Quentin 2013-04-22 08:25:40

@Quentin：謝謝，我從現在開始不會使用，請你幫我解決我發佈的問題。 – user1853128 2013-04-22 08:27:20

我無法理解此聲明「只有在選擇智能手機/平板電腦時才顯示此OS數據。」請清除此內容以便我可以幫助您。 – 2013-04-22 08:35:05

首先，你不應該使用表格佈局。以下是您需要做的以實現您的任務。

HTML：

<div id="mainCategories"> 
    <a id="smartPhone" href="">SmartPhones</a> 
    <a id="tablet" href="">Tablets</a> 
</div> 
<div id="subCategories"> 
</div>

的JavaScript（用jQuery）：

$(function() { 

    var data = {}; 
    data["smartPhone"] = ["ios", "android", "windows"]; 
    data["tablet"] = ["iosTablet", "androidTabled", "windowsTablet"]; 

    $("#mainCategories a").click(function(){ 
     var clickedItem = $(this).attr('id'); 
     var operatingSystems = data[clickedItem]; 
     $("#subCategories").empty(); 
     for(ind in operatingSystems){ 
      var os = operatingSystems[ind]; 
      var anchor = $("<a>"); 
      anchor.attr('href',''); 
      anchor.attr('id', os); 
      anchor.text(os); 
      $("#subCategories").append(anchor); 
     } 
     return false; 
    }); 
});

CSS：

a{ 
    display:block; 
}

這裏是工作提琴： http://jsfiddle.net/t426J/

假設您已將有關操作系統的數據以某種方式加載到JavaScript中。

來源

2013-04-22 09:07:56 SadullahCeran

加載點擊不同錨點標籤上的新數據

回答

相關問題