Question

我有一个问题，当我在标签下发布某些内容时，我会在点击提交按钮时返回活动标签页。例如，我发布在悲剧选项卡上，我再次回到天气选项卡，这是我的活动标签。继承我的代码

这是代码的一部分

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#weather" data-toggle="tab">Weather</a></li>
    <li class=""><a href="#traffic" data-toggle="tab">Traffic</a></li>
    <li class=""><a href="#accident" data-toggle="tab">Accident</a></li>
    <li class=""><a href="#politics" data-toggle="tab">Politics</a></li>
    <li class=""><a href="#tragedies" data-toggle="tab">Tragedies</a></li>
    <li class=""><a href="#warnings" data-toggle="tab">Warnings</a></li>

</ul>

完整的源代码在这里：http://pastebin.com/Mn9WJ9qj

我搜索了一些javascript使用但仍无法帮助我的代码。

Answer 1

Togglable标签插件已打算在单个页面上使用。单击选项卡会触发导航到散列标记，例如#tab2，散列标记链接不会重新加载页面，javascript插件会捕获单击并在散列标记上设置选项卡活动基础。

在您的代码中，表单的操作设置为页面（weathercomment.html），而不是锚点。因此，提交表单会重新加载页面（并将具有硬代码class="active"的选项卡设置为活动标签）。

如果您确实想在提交后加载其他网页（网址），则应根据class="active"动态编码request_uri。

或者，您可以在表单的提交事件上返回false，但不会重新加载您的页面。（另见：How to prevent buttons from submitting forms）。在返回false之前，您可以使用表单输入值来更新数据库或执行其他操作。您也可以在这里进行ajax调用。

示例：

<强> HTML

 <!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">...</div>
  <div role="tabpanel" class="tab-pane" id="profile">
    <div id="formresponse"></div>
    <form role="form" id="profileform">
    <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
    </div> 
     <button type="submit" class="btn btn-default">Submit</button>
    </form>  
  </div>
  <div role="tabpanel" class="tab-pane" id="messages">...</div>
  <div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>

<强>的javascript

$('#profileform').on('submit', function() { 
  $('#formresponse').html('Your email:' + $('#exampleInputEmail1').val()); 
  return false; 
});

演示：http://www.bootply.com/1GqfQaJLoQ

Answer 2

我发现这个解决方案最适合我。

private void GooToTab(string tab)
{
      ScriptManager.RegisterStartupScript(this, this.GetType(), "MyTabCurrent", "window.location=ClientForm1" + tab + ";", false);
}

protected void btnSearchAssociato_Click(object sender, EventArgs e)
{
    GooToTab("#Associato"); // the tab link 

}

Bootstrap 3.2.0：当我发布下面的内容时，如何保持选中的选项卡？

2 个答案: