1

在此处输入图像描述由于我是这个概念的新手，如果有任何错误，请不要介意。我需要帮助。这里所有的锚标签都是硬编码的，但实际上它们应该是动态创建的。我正在尝试在单击锚标记时显示数据。在这种情况下，要显示的数据是不同的。最初，我们展示的是智能手机和平板电脑等设备。在智能手机的点击上，我们必须显示与智能手机完全相关的操作系统版本，如mac，windows，andriod和blackberry......点击平板电脑也是如此，这4个操作系统版本将与平板电脑相关。再次单击操作系统版本链接，然后基于该操作系统，应显示操作系统的版本。例如：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();


        });
4

1 回答 1

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

这是工作小提琴：http: //jsfiddle.net/t426J/

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

于 2013-04-22T09:07:56.863 回答