2

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

这是代码的一部分

<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 来使用，但它仍然无法帮助我的代码。

4

2 回答 2

0

Togglable tabs 插件打算在单个页面上使用。单击选项卡会触发到哈希标记的导航，例如#tab2，哈希标记链接不会重新加载页面，javascript 插件会捕获单击并根据哈希标记设置选项卡处于活动状态。

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

当您确实想在提交后加载不同的页面（url）时，您应该class="active"根据request_uri.

或者，您可以返回false表单的提交事件，这不会重新加载您的页面。（另请参阅：如何防止按钮提交表单）。在返回之前，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

于 2014-11-10T20:09:36.577 回答
-1

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

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 

}
于 2016-05-11T09:11:32.367 回答