[英]Rails will_paginate and tabs
I have a problem with working my tab along with will_pagination. 我在将我的标签与will_pagination一起使用时遇到问题。 When i press Tab 2, it will show the correct content, but when i press on the pagination link, example page 2. It will bring me back to my Tab 1 view.
当我按Tab 2时,它将显示正确的内容,但是当我按分页链接(例如第2页)时,它将带我回到我的Tab 1视图。 After this, when i press back Tab 2, it will appear page 2 content of Tab 2. The problem here is why does it bring my back to my Tab 1 view when i press on the pagination link in Tab 2.
此后,当我按回Tab 2时,它将显示Tab 2的第2页内容。这里的问题是,当我按Tab 2中的分页链接时,为什么将我带回到Tab 1视图。
My View Code 我的查看代码
<div>
<ul class="nav nav-tabs" id="TabLength">
<% @biscuit.each_index do |i| %>
<% if i == 0 %>
<li class="active"><a data-toggle="tab" href="#<%= @biscuit[i] %>"><%= @biscuit[i] %></a></li>
<% else %>
<li><a data-toggle="tab" href="#<%= @biscuit[i] %>"><%= @biscuit[i] %></a></li>
<% end %>
<% end %>
</ul>
<div class="tab-content">
<% @biscuit.each_index do |i| %>
<% if i == 0 %>
<div class="tab-pane fade in active" id="<%= @biscuit[i] %>">
<div class="row" id="PictureSetting">
<% @testpage.each do |i| %>
<div class="col-md-4" id="ProductPic">
<%= image_tag(i.name , class:"img-thumbnail", size:"180x180") %>
</div>
<% end %>
</div>
<%= will_paginate @testpage, :param_name => 'user_page' %>
</div>
<% elsif i == 1 %>
<div class="tab-pane fade" id="<%= @biscuit[i] %>">
<div class="row" id="PictureSetting">
<% @memberpage.each do |i| %>
<div class="col-md-4" id="ProductPic">
<%= image_tag(i.name , class:"img-thumbnail", size:"180x180") %>
</div>
<% end %>
</div>
<%= will_paginate @memberpage, :param_name => 'choco_page' %>
</div>
<% else %>
<div class="tab-pane fade" id="<%= @biscuit[i] %>">
<div class="row" id="PictureSetting">
<h1>hello</h1>
</div>
</div>
<% end %>
<% end %>
</div>
</div>
Thanks 谢谢
Based on answer from here , you can design the following code for the problem: 根据此处的答案,您可以为该问题设计以下代码:
<script>
// open tab on click
$('#TabLength a').click(function (e) {
e.preventDefault();
$(this).tab('show');
// getting tab id
var id = $(e.target).attr("href").substr(1);
// change hash value for all pages
$('ul.pagination > li > a').each(function(i, pageAnchor) {
pageAnchor.hash = id;
});
});
// assign tab id to location hash
$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;
});
// open initial hash
var hash = window.location.hash;
$('#TabLength a[href="' + hash + '"]').tab('show');
// UPDATE
$('ul.pagination > li > a').each(function(i, pageAnchor) {
pageAnchor.hash = hash;
});
</script>
It saves currently selected tab into location.hash
. 它将当前选择的选项卡保存到
location.hash
。 and selects it when you navigate to a new page. 并在导航到新页面时将其选中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.