Jquery tabs not hiding unselected tabs

StackOverflow https://stackoverflow.com/questions/22330561

문제

I've got a jquery tabs set up on IE9, code looks like this.

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

I think that is all the relevant html/code, can anyone see a reason why my second tab's content is showing up, regardless of whether the tab2 is selected or not? As of now, clicking on the tab does nothing for me.

도움이 되었습니까?

해결책

The problem is you can not use the latest version of jQuery with that version of jQuery ui. 

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

update it to the current version like the CSS file you are using

다른 팁

There's probably because of your jQuery UI version is not compatible with lastest jQuery version, you can use version 1.10.4 instead:

<!-- 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

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top