Question

我正在使用jQuery UI标签插件。它在鼠标悬停时运行良好，但在鼠标离开时，标签的内容仍然显示。这是代码：

<script>    
    $(function() {          
        $( "#tabs").tabs({ event: "mouseover",active: false,collapsible: true,});
    }); 
</script>

有没有选项可以在鼠标离开时折叠标签内容？

Answer 1

试试这个

 $( "#tabs" ).tabs({
event: "mouseover"
});

见以下链接

http://jqueryui.com/tabs/#mouseover

Answer 2

检查这个小提琴： http://jsfiddle.net/hsakapandit/z4HYu/4/

$( "#tabs" ).tabs({event:'mouseleave',collapsible: true,active:false});

更新：与JQuery相同的效果

http://jsfiddle.net/hsakapandit/z4HYu/11/

Answer 3

对于mrdeveloper：最后确实如此。我忘了将jquery函数放在main函数中：

<!doctype html>
<html lang="us">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Example Page</title>
    <link href="css/ui-lightness/jquery-ui-1.10.4.custom.css" rel="stylesheet">
    <link href="1.css" rel="stylesheet">
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery-ui-1.10.4.custom.js"></script>
    <script>
    $(function() {

        $("#text1,#text2,#text3").hide();
$("#1,#2,#3").mouseleave(function()
            { 
$("#text1,#text2,#text3").hide();
            });
$("#1").mouseenter(function()
            { 
                $("#text1").show();
                 $("#text2,#text3").hide();
            });
$("#2").mouseenter(function()
            { 
                $("#text2").show();
                 $("#text1,#text3").hide();
            });
$("#3").mouseenter(function()
            { 
                $("#text3").show();
                 $("#text2,#text1").hide();
            });



    });

    </script>

</head>

<body>

<div class="tab">
    <span id="1">Tab 1</span>    
    <span id="2">Tab 2</span>   
    <span id="3">Tab 3</span>   
</div>
<div class="text" id="text1"><b>Text 1:</b>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. </div>
<div class="text" id="text2"><b>Text 2: </b> Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. </div>
<div class="text" id="text3"><b>Text 3:</b> Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu.</div>


</body>
</html>

jQuery选项卡mouseover和mouseleave

3 个答案: