回发c#后保留引导选项卡

Question

回发c#后保留引导选项卡

use*_*980 12 c# asp.net twitter-bootstrap

我目前在我的fileupload回发后保留引导选项卡时遇到问题.代码如下

<script type="text/javascript">

                $('#myTab a[href="#image"]').click(function (e) {
                    e.preventDefault();
                    $("#myTab").removeClass("active"); 
                    $(this).addClass('active');
                    $(this).tab('show');
                })

                $('#myTab a[href="#information"]').click(function (e) {
                    e.preventDefault();
                    $("#myTab").removeClass("active");
                    $(this).addClass('active');
                    $(this).tab('show');
                })

                $('#myTab a[href="#password"]').click(function (e) {
                    e.preventDefault();
                    $("#myTab").removeClass("active");
                    $(this).addClass('active');
                    $(this).tab('show');
                })

                $('#myTab a[href="#account"]').click(function (e) {
                    e.preventDefault();
                    $("#myTab").removeClass("active");
                    $(this).addClass('active');
                    $(this).tab('show');
                })

    </script>

Run Code Online (Sandbox Code Playgroud)

有人可以告诉我如何在回发后保留这个引导程序吗？

Answer 1

ale*_*rdo 12

好吧,我已经有了这个问题,我这样解决了:

HiddenField在页面上添加新内容并将其值设置为tab需要显示的第一个值:
```
<asp:HiddenField ID="hidTAB" runat="server" Value="image" />
```
Run Code Online (Sandbox Code Playgroud)
在click您定义为交替的每个函数上tabs,将HiddenField值设置为实际tab单击的值.
```
document.getElementById('<%=hidTAB.ClientID %>').value = "image";
```
Run Code Online (Sandbox Code Playgroud)

在您的jQuery document.ready函数上,使用该HiddenField值替换为之前打开的最后一个选项卡Postback.

$(document).ready( function(){
    var tab = document.getElementById('<%= hidTAB.ClientID%>').value;
    $( '#myTab a[href="' + tab + '"]' ).tab( 'show' );
});

Run Code Online (Sandbox Code Playgroud)

这是Bootstrap选项卡文档,这里是jQuery Ready文档

Answer 2

Fla*_*rev 5

参考以上想法，这里是我的做法（包括完整代码）

在HTML页面的<Head>部分中，

<script type="text/javascript">
    $(document).ready(function () {
        var tab = document.getElementById('<%= hidTAB.ClientID%>').value;
        $('#myTabs a[href="' + tab + '"]').tab('show');
    });
</script>

Run Code Online (Sandbox Code Playgroud)

在<body>部分中放置一个hiddenfield

<asp:HiddenField ID="hidTAB" runat="server" Value="#tab1" />

Run Code Online (Sandbox Code Playgroud)

并且在<body>部分中具有Bootstrap 3.0相关代码

<ul class="nav nav-tabs" id="myTabs">
  <li><a href="#tab1" data-toggle="tab">Home page</a></li>
  <li><a href="#tab2" data-toggle="tab">another page</a></li>
</ul>

Run Code Online (Sandbox Code Playgroud)

不要将任何选项卡设置为活动状态（这是由Hiddenfield的初始Value =“＃tab1”设置的）。

然后将一个按钮添加到tab2 DIV

像这样：

<div class="tab-pane" id="tab2">
  <asp:FileUpload ID="FileUpload2" runat="server" /> (note this example is for uploading a file)
  <asp:Button ID="FileUploadButton" runat="server" Text="Upload File" onclick="FileUploadButton_Click" />
</div>

Run Code Online (Sandbox Code Playgroud)

最后在后面添加您的C＃代码以设置hiddenfield的值

protected void FileUploadButton_Click(object sender, EventArgs e)
{
      hidTAB.Value = "#tab2";
}

Run Code Online (Sandbox Code Playgroud)

在回发JQuery时，它将在hiddenfield中读取新值并显示tab2 ：）

希望这对某人有帮助。

特雷夫

归档时间：	11 年，11 月前
查看次数：	31746 次
最近记录：	8 年，4 月前