Question

我在IE9上设置了一个jquery标签，代码看起来像这样。

<head>

<!-- jquery includes -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>

<!-- tabs stuff-->
<script>
    $(function(){
        $( "#tabs" ).tabs();
    });
</script>

</head>

<body>
    <div id= "tabs">
        <ul>
            <li><a href="#tabs-1">Search</a></li>
            <li><a href="#tabs-2">Add/Modify</a></li>
        </ul>
        <div id= "tabs-1">
            <form name= "search_form" method= "post" action= "/" onSubmit="return validate(this);">
                <input id="name" type= "text"/>
                <label> Search </label> <input type= "checkbox" id= "option" name= "option"/>
                <input type= "submit" value= "Search" id= "search"/>
            </form>
        </div>
        <div id= "tabs-2">
            <p> This is getting shown, even though tab-2 is not selected </p>
        </div>
    </div> <!-- end of tabs container-->

<!-- right now, I've got the 'validate' function down here, but didn't feel like I needed
    to include it to illustrate the problem I am having -->

</body>

我认为这是所有相关的html /代码，任何人都可以看到我的第二个标签内容出现的原因，无论是否选择了tab2？截至目前，点击选项卡对我没有任何帮助。

Answer 1

问题是你无法使用最新版本的jQuery和那个版本的jQuery ui。

src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
                                                   ^^^^^

将其更新为当前版本，如您正在使用的CSS文件

Answer 2

可能是因为您的jQuery UI版本与最新的jQuery版本不兼容，您可以使用版本1.10.4代替：

<!-- jquery includes -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<强> Fiddle Demo

Jquery选项卡不隐藏未选中的选项卡

2 个答案: