谁能给我关于如何使它在即上工作的建议？

问题描述

| 在Firefox中工作正常，但在IE中什么也不做。

<script type=\"text/javascript\">
$(document).ready(function(){
    var links = $(\'.bound\');
    var west = $(\'.west\');
    var west2 = $(\'.west2\');
    var west3 = $(\'.west3\');
    var west4 = $(\'.west4\');
    west2.hide();
    west3.hide();
    west4.hide();
    links.click(function(event){
       west.hide();
       west2.hide();
       west3.hide();
       west4.hide();
       west.filter(\'.\' + event.target.id).show();
       west2.filter(\'.\' + event.target.id).show();
       west3.filter(\'.\' + event.target.id).show();
       west4.filter(\'.\' + event.target.id).show();
    });
});
</script>

html

<div class=\"tabset\">
            <div id=\"tab1\" class=\"tab-Box\">
                <div class=\"form-holder\">
                    <form action=\"#\">
                        <fieldset>
                            <label for=\"lb02\"><strong>Choose district:</strong></label>
                            <select id=\"lb02\">
                                <option class=\"bound\" id=\"west\">WEST</option>
                                <option class=\"bound\" id=\"west2\">WEST2</option>
                                <option class=\"bound\" id=\"west3\">WEST3</option>
                                <option class=\"bound\" id=\"west4\">WEST4</option>
                            </select>
                        </fieldset>
                    </form>
                </div>
                <div class=\"report-Box\">
                    <table>
                        <thead>
                            <tr>
                                <td class=\"name\">Name</td>
                                <td class=\"department\">Department</td>
                                <td class=\"title\">Title</td>
                                <td class=\"district\">district</td>
                                <td class=\"profile\">&nbsp;</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class=\"west\">
                                <td>Name1</td>
                                <td>Dept2</td>
                                <td>Title2</td>
                                <td>West</td>
                                <td><a class=\"btn-profile\" href=\"#\">PROFILE</a></td>
                            </tr>
                            <tr class=\"west2\">
                                <td>Name2</td>
                                <td>Dept2</td>
                                <td>Title2</td>
                                <td>West2</td>
                                <td><a class=\"btn-profile\" href=\"#\">PROFILE</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

    

解决方法

在

select

元素上使用

change

事件来代替

option

元素上的

click

事件。

var links = $(\'#lb02\'),wests = $(\'.west,.west2,.west3,.west4\');
wests.not(\'.west\').hide();
links.change(function(event) {
    wests.hide().filter(\'.\' + this.options[this.selectedIndex].id).show();
});

    ,可能是因为IE无法识别

event.target

，而是使用了

srcElement

属性。 IE也可能不会将事件参数传递给处理程序，因此您必须抓住“ 9”。对于您的点击功能，请尝试：

links.click(function(event){
    var e = event || window.event,et = (e.target) ? e.target : e.srcElement;

       west.hide();
       west2.hide();
       west3.hide();
       west4.hide();
       west.filter(\'.\' + et.id).show();
       west2.filter(\'.\' + et.id).show();
       west3.filter(\'.\' + et.id).show();
       west4.filter(\'.\' + et.id).show();
});