简体   繁体   English

jQuery-UI:不能取消选择选项卡

[英]jQuery-UI: Can't deselect tabs

I'm using the jQuery-UI tabs widget and I don't want any tabs to be selected when the tabs load for the first time. 我正在使用jQuery-UI选项卡小部件,并且我不希望在首次加载选项卡时选择任何选项卡。 I've called the tabs method with the following argument: 我使用以下参数调用了tabs方法:

$( "#tabs" ).tabs({selected: -1});

which should deselect all the tabs according to the jQuery wiki. 这应该根据jQuery Wiki取消选择所有选项卡。 However it doesn't work, the first tab, 'Action', is always selected. 但是,它不起作用,始终选择第一个选项卡“ Action”。 Could anyone tell me how to make sure no tabs are selected when they first load? 谁能告诉我如何确保在首次加载时未选择任何标签? Thanks. 谢谢。

Here's what I'm working with: 这是我正在使用的:

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="js/jquery-ui-1.9.2.custom/js/jquery-ui-1.10.0.custom/css/ui-lightness/jquery-ui-1.10.0.custom.css" />
        <script src="js/jquery-ui-1.9.2.custom/js/jquery-1.9.1.js"></script>
        <script src="js/jquery-ui-1.9.2.custom/js/jquery-ui-1.10.0.custom/js/jquery-ui-1.10.0.custom.js"></script>

<script language="javascript" type="text/javascript">
             $(document).ready(function(){    
      $( "#tabs" ).tabs({selected: -1}); 

});
        </script>

    </head>
    <body>
        <div id="tabs">
        <ul>
        <li><a href="javascript: void(0);">Action</a></li>
        <li><a href="javascript: void(0);">Animation</a></li>
        <li><a href="javascript: void(0);">Classics</a></li>
        <li><a href="javascript: void(0);">Comedy</a></li>
        <li><a href="javascript: void(0);">Documentary</a></li>
        <li><a href="javascript: void(0);">Drama</a></li>
        <li><a href="javascript: void(0);">Horror</a></li>
        <li><a href="javascript: void(0);">Family</a></li>
        <li><a href="javascript: void(0);">Suspense</a></li>
        <li><a href="javascript: void(0);">Sci Fi/Fantasy</a></li>
        <li><a href="javascript: void(0);">World</a></li>
    </ul>
          </div>
    </body>
</html>

UPDATE: Adding $("#tabs ul li").eq(0).removeClass('ui-state-active'); 更新:添加$("#tabs ul li").eq(0).removeClass('ui-state-active'); after $("#tabs").tabs(); $("#tabs").tabs(); works. 作品。 It seems to prevent the tab being selected the next time you click on it but it work fine after that. 似乎阻止了您下次单击该选项卡时选择该选项卡,但此后它可以正常工作。 Should be able to sort that out though. 应该可以解决这个问题。

UPDATE: Turns out all you need is $("#tabs").tabs({ collapsible: true, active: false }); 更新:原来您需要的只是$("#tabs").tabs({ collapsible: true, active: false }); to initially deselect all tabs. 首先取消选择所有标签。

Unfortunately, it seems that it might not work with jQuery-UI tabs as said in http://jquery.10927.n7.nabble.com/Can-t-disable-all-tabs-td129542.html . 不幸的是,它似乎无法与jQuery-UI选项卡一起使用,如http://jquery.10927.n7.nabble.com/Can-t-disable-all-tabs-td129542.html中所述。

You may use jquery tabs from http://www.eduteka.org/ajax/tabs3/ 您可以使用http://www.eduteka.org/ajax/tabs3/中的 jquery标签

And as you read down the documentation, there is a heading like "Start with all tabs unselected/allow toggle visibility", which will be what you are looking for. 在阅读文档时,会出现一个标题,例如“开始时未选中所有选项卡/允许切换可见性”。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM