- 首页
- 前端开发
- 如何链接到页面并使用 rails 激活特定选项卡
如何链接到页面并使用 rails 激活特定选项卡
[英] How to link to a page and have a specific tab active with rails
本文介绍了如何链接到页面并使用 rails 激活特定选项卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如果一个信息页面有多个基于不同主题的标签，并且存在从不同页面指向信息页面的链接，您如何根据所使用的链接链接到带有活动标签的信息页面?
我想要一个这样的链接:
查看条款&我们信息页面上的条件 <%= link_to "here", info_path %>，谢谢.</p>
使用 Terms 选项卡激活我的信息页面，如下所示:
<a href="#terms" class="active" aria-controls="terms" role="tab" data-toggle="tab"><h2>术语</h2><p>这些是术语.</p></a>
我想知道如何根据来自我网站不同页面的链接更改活动"状态.是否需要在特定的 tabpanel 上更改活动状态?谢谢！
这是信息页面的标签部分:
<li role="演示文稿"><a href="#about" aria-controls="about" role="tab" data-toggle="tab">关于</a><li role="演示文稿"><a href="#advertise" aria-controls="advertise" role="tab" data-toggle="tab">广告</a><li role="演示文稿"><a href="#legal" aria-controls="legal" role="tab" data-toggle="tab">合法的</a><li role="演示文稿"><a href="#privacy" aria-controls="privacy" role="tab" data-toggle="tab">隐私</a><li role="演示文稿"><a href="#terms" aria-controls="terms" role="tab" data-toggle="tab">条款</a>
<!-- 标签窗格--><div class="tab-content" id="infoTabContent"><!-- 标签分隔符 --><div role="tabpanel" class="tab-pane淡入" id="about"><h3>关于</h3><div class="缩进"><p>这是使用 div 来缩进行的关于选项卡</p>
<!-- 标签分隔符 --><div role="tabpanel" class="tab-pane淡入淡出" id="advertise"><h3>广告</h3>
<!-- 标签分隔符 --><div role="tabpanel" class="tab-pane淡出" id="legal"><h3>法律</h3>
<!-- 标签分隔符 --><div role="tabpanel" class="tab-pane淡出" id="privacy"><h3>隐私</h3>
<!-- 标签分隔符 --><div role="tabpanel" class="tab-pane淡出" id="terms"><h3>条款</h3>
<!-- 标签分隔符 --></div><!-- 标签内容-->
解决方案
您可以在 link_to 方法上传递参数.类似的东西:
link_to "here", info_path(active_tab: "your_active_tab_name")
因此，在您的信息页面视图中，您可以尝试从 params[:active_tab] 检索它，以便您可以根据该值设置您的活动属性.希望能帮到你，祝你好运
如果您使用引导标签(https://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp)，您可以通过将活动类添加到li"元素来将某些选项卡设置为活动标签，如下所示:
<a href="#advertise" aria-controls="advertise" role="tab" data-toggle="tab">广告</a>
因此，无论您在何处放置指向该信息页面的链接，都应该传递一个参数，指示哪个选项卡将处于活动状态，如下所示:
link_to "more info", info_path(active_tab: "advertise")
然后，在您的信息页面上，您检查 params[:active_tab] 以确定哪个选项卡将处于活动状态.类似的东西:
<li role="presentation #{params[:active_tab]=='about' ? 'active' : '' }"><a href="#about" aria-controls="about" role="tab" data-toggle="tab">关于</a><li role="presentation #{params[:active_tab]=='advertise ? 'active' : '' }"><a href="#advertise" aria-controls="advertise" role="tab" data-toggle="tab">广告</a>... 所以它继续
希望这能说清楚！此外，必须对其进行测试，但认为这可行
If an info page has multiple tabs based on different topics and there are links leading to the info page from different pages, how do you link to the info page with an active tab depending on the link used?
I want to have a link like this:
<p>View the terms & conditions on our info page <%= link_to "here", info_path %>, thanks.</p>
Lead to my info page with the Terms tab active like this:
<li role="presentation">
<a href="#terms" class="active" aria-controls="terms" role="tab" data-toggle="tab">
<h2>Terms</h2>
<p>These are the terms.</p>
</a>
</li>
I was wondering how to change the "active" status based on the link from a different page on my site. Does the active status need to be changed on the specific tabpanel instead? Thank you!
This is the tab section from the info page:
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">
<a href="#about" aria-controls="about" role="tab" data-toggle="tab">
About
</a>
</li>
<li role="presentation">
<a href="#advertise" aria-controls="advertise" role="tab" data-toggle="tab">
Advertise
</a>
</li>
<li role="presentation">
<a href="#legal" aria-controls="legal" role="tab" data-toggle="tab">
Legal
</a>
</li>
<li role="presentation">
<a href="#privacy" aria-controls="privacy" role="tab" data-toggle="tab">
Privacy
</a>
</li>
<li role="presentation">
<a href="#terms" aria-controls="terms" role="tab" data-toggle="tab">
Terms
</a>
</li>
</ul>
<!-- TAB PANES -->
<div class="tab-content" id="infoTabContent">
<!-- TAB DIVIDER -->
<div role="tabpanel" class="tab-pane fade in" id="about">
<h3>About</h3>
<div class="indent">
<p>This is the about tab using a div to indent lines</p>
</div>
</div>
<!-- TAB DIVIDER -->
<div role="tabpanel" class="tab-pane fade" id="advertise">
<h3>Advertise</h3>
</div>
<!-- TAB DIVIDER -->
<div role="tabpanel" class="tab-pane fade" id="legal">
<h3>Legal</h3>
</div>
<!-- TAB DIVIDER -->
<div role="tabpanel" class="tab-pane fade" id="privacy">
<h3>Privacy</h3>
</div>
<!-- TAB DIVIDER -->
<div role="tabpanel" class="tab-pane fade" id="terms">
<h3>Terms</h3>
</div>
<!-- TAB DIVIDER -->
</div><!-- Tab Content -->
解决方案
You can pass params on link_to method. Something like:
link_to "here", info_path(active_tab: "your_active_tab_name")
So, in your info page view, you can try to retrive it from params[:active_tab], so you can set your active attribute based on that value.
Hope this helps, good luck
EDIT:
If you're using bootstrap tabs (https://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp), you can set some tab as active by adding the active class to the "li" element, like this:
<li role="presentation active">
<a href="#advertise" aria-controls="advertise" role="tab" data-toggle="tab">
Advertise
</a>
</li>
So, wherever you put a link to that info page, you should pass a param that indicates which tab will be active, something like this:
link_to "more info", info_path(active_tab: "advertise")
Then, on your info page, you check the params[:active_tab] to determine which tab will be active. Something like:
<ul class="nav nav-tabs" role="tablist">
<li role="presentation #{params[:active_tab]=='about' ? 'active' : '' }">
<a href="#about" aria-controls="about" role="tab" data-toggle="tab">
About
</a>
</li>
<li role="presentation #{params[:active_tab]=='advertise ? 'active' : '' }">
<a href="#advertise" aria-controls="advertise" role="tab" data-toggle="tab">
Advertise
</a>
</li>
... and so it goes on
</ul>
Hope this makes it clear! Also, has to test it, but think this works
这篇关于如何链接到页面并使用 rails 激活特定选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
