javascript - asp.net bootstrap 在回发事件后保持当前事件选项卡

标签 javascript jquery asp.net twitter-bootstrap c#-4.0

我有以下 asp.net aspx 代码

<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>

当我单击 LinkBut​​ton 时,此脚本代码在回发事件后保持事件选项卡

<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>

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

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

注意:我从堆栈帖子中获取了这个示例:How do I keep the current tab active with twitter bootstrap after a page reload? 。该解决方案已发布者:@koppor。

任何帮助

最佳答案

不熟悉 jQuery,所以当我遇到这个问题时,我寻求一个 ASP.NET 解决方案。 我通过更改列表中的 a href 并替换为 asp:linkbutton 解决了这个问题。 然后我还转到包含选项卡的 div 并向每个选项卡添加 runat = "server",还添加 ID="Tab1"、 Tab2 等。 然后在链接按钮后面的代码中我添加了以下代码

Me.Tab1.Attributes("class") = "tab-pane active"
Me.Tab2.Attributes("class") = "tab-pane"
Me.Tab3.Attributes("class") = "tab-pane"

对于您想要激活的选项卡,您可以将属性更改为选项卡 Pane 激活。 这样,当单击链接按钮时,只有您想要事件的选项卡处于事件状态,并且在回发时,因为这些控件现在位于服务器端,您将保留在事件选项卡上。

关于javascript - asp.net bootstrap 在回发事件后保持当前事件选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22964301/

相关文章:

javascript - 如何使用 Node.js Express、Mongo 和 Markdown-it 渲染 Markdown?

Javascript include() 不是一个函数

javascript - 在另一个函数中调用 this.checked 时防止传播到事件处理程序

c# - 文本转语音可以在 Windows Azure 上运行吗?

javascript - 如何放置选择元素和切换按钮以释放 jqgrid 工具栏

javascript - Google Analytics(分析)目标不起作用

asp.net - .NET 4.0 服务器上的旧 Web 应用程序停止工作

c# - Internet Explorer 脚本错误,来自网页的消息,权限被拒绝

javascript - string.split() 之后 Switch/case 没有响应

javascript - jQuery 没有看到 click() 事件