JQuery ui的tabs(option)设置selected属性以后没有用
在使用JQuery ui的tabs(option)时，我遇到一个问题，就是设置selected属性以后没有用。
HTML示例代码如下：
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title></title> <script src="jqueryui/js/jquery-1.9.1.js" type="text/javascript"></script> <script src="jqueryui/js/jquery-ui-1.10.2.custom.min.js" 毕业论文 type="text/javascript"></script> <link rel="Stylesheet" type="text/css" href="jqueryui/css/smoothness/jquery-ui-1.10.2.custom.css"/> </head> <body> <form id="form1" runat="server"> <div> <div id="tabs"> <ul> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> </ul> <div id="tab1">Content 1</div> <div id="tab2">Content 2</div> <div id="tab3">Content 3</div> </div> <script src="Tabs.js" type="text/javascript"></script> </div> </form> </body> </html>
Javascript代码如下：
$("#tabs").tabs({ collapsible: true, disabled: [], selected: 1, event: 'click', fx: { opacity: "toggle"} });
按照我对开发文档的理解，应该selected属性设置为1的时候，加载选项卡时，应该显示的是第二个选项卡，就是说index=1的选项卡，但是我测试的结果是显示第一个选项卡也就是index=0的选项卡，我用IE9的开发者工具查看发现如下HTML代码
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all ui-tabs-collapsible"> <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist"> <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabIndex="0" aria-labelledby="ui-id-1" aria-selected="true" aria-controls="tab1"><a id="ui-id-1" class="ui-tabs-anchor" role="presentation" tabIndex="-1" href="#tab1">Tab 1</a></li> <li class="ui-state-default ui-corner-top" role="tab" tabIndex="-1" aria-labelledby="ui-id-2" aria-selected="false" aria-controls="tab2"><a id="ui-id-2" class="ui-tabs-anchor" role="presentation" tabIndex="-1" href="#tab2">Tab 2</a></li> <li class="ui-state-default ui-corner-top" role="tab" tabIndex="-1" aria-labelledby="ui-id-3" aria-selected="false" aria-controls="tab3"><a id="ui-id-3" class="ui-tabs-anchor" role="presentation" tabIndex="-1" href="#tab3">Tab 3</a></li> </ul> <div aria-hidden="false" style="display: block;" aria-expanded="true" id="tab1" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-labelledby="ui-id-1">Content 1</div> <div aria-hidden="true" style="display: none;" aria-expanded="false" id="tab2" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-labelledby="ui-id-2">Content 2</div> <div aria-hidden="true" style="display: none;" aria-expanded="false" id="tab3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-labelledby="ui-id-3">Content 3</div> </div>
我发现第一个li元素的tabIndex属性是0，后面两个li元素的tabIndex属性都是-1，我也不知道这个tabIndex是不是就是selected指定的Index，也不知道为什么我设置的selected属性不起作用，请有经验的朋友帮忙看一下
用selected属性是jquery 1.8里的，如果你使用的是1.10的版本，那么这个属性已经被active代替！