如何在 jquery UI 选项卡中获取表单提交上的选定选项卡

Question

在我的MVC应用程序中，我使用jquery UI选项卡（jquery-ui-1.9.0）并使用以下脚本设置选择的选项卡

<script type="text/javascript">
$(document).ready(function () {
    $( "#tabs" ).tabs({ selected: @Convert.ToInt32(Model.SearchModel.SearchType) })
});

<div id="tabs">
 <ul>
   <li><a href="#articlesearchtab">Article</a></li>
   <li><a href="#othersearchtab">Other</a></li>
 </ul>
<div id="articlesearchtab">
   //content
</div>
<div id="othersearchtab">
   //content
</div>

用户可以进入任一选项卡并更新内容。我需要在表单提交时获取所选选项卡的内容。如何了解用户选择的选项卡？

Answer 1

在 jQuery UI 1.9 中，所选选项已被弃用：

已

弃用的选定选项;已重命名为活动

（#7135） 为保持一致性，所选选项已重命名为活动 与jQuery UI中的其他插件一起使用。您应该替换 带有活动选项的选定选项。

所选选项将在 1.10 中删除。

以下是获取当前选项卡的新方法：

布尔值：将活动设置为 false 将折叠所有面板。这要求可折叠选项为 true。 整数：处于活动状态（打开）的面板的从零开始的索引。负值选择从最后一个面板向后移动的面板。

代码示例：

使用指定的活动选项初始化选项卡：

$( ".selector" ).tabs({ active: 1 });

初始化后获取或设置活动选项：

// getter
var active = $( ".selector" ).tabs( "option", "active" );
// setter
$( ".selector" ).tabs( "option", "active", 1 );

Answer 2

简单地说，在 javascript 中使用提交表单的代码隐藏调用相同的选项卡。

<script type="text/javascript" language="javascript">
    function OpenMoreDetails(id) {
        document.getElementById(id).style.display = 'block';
        return false;
    }
</script>
protected void btnAttachDocument_Click(object sender, EventArgs e)
{
    //your code     
    ScriptManager.RegisterStartupScript(this, GetType(), "attach",  "OpenSearchOption('yourtabid',this);", true);
}