加载点击不同锚点标签上的新数据

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

加载点击不同锚点标签上的新数据

回答

相关问题