asp.net bootstrap 在回发事件后保持当前活动选项卡 [英] asp.net bootstrap Keep current active tab after post-back event

问题描述

我有以下 asp.net aspx 代码

<asp:LinkBut​​ton CssClass="form-search" ID="LinkBut​​tonSearch" runat="server">Search</asp:LinkBut​​ton><br/><ul class="nav nav-tabs" id="myTab"><li class="active"><a href="#home">首页</a></li><li><a href="#profile">个人资料</a></li><li><a href="#messages">消息</a></li><li><a href="#settings">设置</a></li><div class="tab-content"><div class="tab-pane active" id="home">home</div><div class="tab-pane" id="profile">profile</div><div class="tab-pane" id="messages">messages</div><div class="tab-pane" id="settings">settings</div>

当我单击 LinkBut​​ton 时，此脚本代码在回发事件后保持活动标签

注意:只有当我重新加载当前页面时，此代码才能正常工作.它保持当前选项卡的焦点.但是当您单击链接"按钮时，它会将我带回默认选项卡.

如何使此代码也适用于任何控件的回发事件.

注意:我从堆栈帖子中获取了这个示例:如何在页面重新加载后使用 twitter bootstrap 保持当前标签页处于活动状态?.此解决方案已由@koppor 发布.

任何帮助

解决方案

我尝试了你的脚本，它解决了我的一个问题，我将此代码添加到我的提交按钮

Response.Redirect("Settings.aspx#step2");

希望对你有用

I have the following asp.net aspx code

<asp:LinkButton  CssClass="form-search" ID="LinkButtonSearch"  runat="server">Search</asp:LinkButton>

<br />

<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane active" id="home">home</div>
<div class="tab-pane" id="profile">profile</div>
<div class="tab-pane" id="messages">messages</div>
<div class="tab-pane" id="settings">settings</div>
</div>

This script code keeps the active tab after post-back event when i click on the LinkButton

<script>
  $(document).ready( function(){
    $('#myTab a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    });

    // store the currently selected tab in the hash value
    $("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
        var id = $(e.target).attr("href").substr(1);
        window.location.hash = id;
    });

    // on load of the page: switch to the currently selected tab
    var hash = window.location.hash;
    $('#myTab a[href="' + hash + '"]').tab('show');
  });
</script>

NB: This code works fine only when i reload the current page. It keeps the current tab focus. but when u click on the Link Button, it takes me back to the default tab.

How can make this code also work on the post back event of any controls.

Note: i took this example from the stack post : How do I keep the current tab active with twitter bootstrap after a page reload? . This solution has been posted by: @koppor.

Any helps

解决方案

I tried your script and it solved one of my problems, i added this code to my submit button

Response.Redirect("Settings.aspx#step2");

Hope it works for yours

这篇关于asp.net bootstrap 在回发事件后保持当前活动选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！