easyui 动态选中特定Tabs

1、引用easyui

2、//html

点击选中特定Tab

<div style="margin:20px 0;">

<input  name="select" type="radio" onclick="selectTabs('0')"><span>1</span>

<input  name="select" type="radio" onclick="selectTabs('1')"><span>2</span>

<input  name="select" type="radio" onclick="selectTabs('2')"><span>3</span>

<input  name="select" type="radio" onclick="selectTabs('3')"><span>4</span>

</div>

<div id="tt" class="easyui-tabs" style="width:700px;height:250px">

<div title="11" style="padding:10px">

第一个Tab面板

</div>

<div title="12" style="padding:10px">

第二个Tab面板

</div>

<div title="13"  style="padding:10px">

第三个Tab面板

</div>

        <div title="14"  style="padding:10px">

第四个Tab面板

</div>

</div>

3、//script

 function selectTabs(i) {

//这一步，得到当前选中的面板，设置selected:false

//如果这一步不设置，则只在第一次点击的时候好用

       var _Tab_Selected = $('#tt').tabs('getSelected');

       var _Tab_Selected_Index = $('#tt').tabs('getTabIndex', _Tab_Selected);

       $('#tt').tabs('update', {

           tab: _Tab_Selected,

           options: {

               selected: false

           }

       });

//这一步是网上出现最多的解决办法

       var _i = Number(i);

       var _Tab = $('#tt').tabs('getTab', _i);       

       $('#tt').tabs('update', {

           tab: _Tab,

           options: {

               selected: true

           }

       });

  //这一步是用于刷新tabs插件，不加的话，tabs不会刷新，不显示最新选中面板。    

           $('#tt').tabs({

               plain: 0

           })

   }