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

Question

​

由于我对这个概念还不熟悉，如果有任何错误，请不要介意。我需要帮助。这里所有的锚标签都是硬编码的，但实际上它们应该是动态创建的。我正在尝试显示单击锚点标记时的数据。在此场景中，要显示的数据不同。最初，我们展示的是SmartPhone和平板电脑等设备。在点击智能手机时，我们必须显示操作系统版本，如mac，windows，andriod和黑莓，这是完全与智能手机相关的…同样在平板电脑上点击，这4个操作系统版本也将显示与平板电脑相关。再次点击os版本链接，然后基于该os，应该显示os的版本。例如: 4.0 ics、4.1:jellybean等，仅当选择智能手机/平板电脑时，才会显示此操作系统数据。这是我尝试过的代码...！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();


        });

Answer 1

首先，您不应该使用表格进行布局。下面是你完成任务所需要做的事情。

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

这里是working fiddle：http://jsfiddle.net/t426J/

假设你已经以某种方式将关于操作系统的数据加载到了javascript中。