Question

如果信息页面有多个基于不同主题的标签，并且有来自不同页面的信息页面的链接，那么如何根据所使用的链接链接到具有活动标签的信息页面？

我希望有这样的链接：

     insert  into Usuario(DOCUMENTOIDENTIDAD,NOMBRE,CARGO,CONTRASENA,PERMISO)
 values ('22323','asfa','Administrador','123456','0')
 RETURNING ID INTO :temp

导航到我的信息页面，<p>View the terms & conditions on our info page <%= link_to "here", info_path %>, thanks.</p>标签处于活动状态，如下所示：

Terms

我想知道如何改变＆＃34;活跃＆＃34;状态基于我网站上不同页面的链接。是否需要在特定<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>上更改活动状态？谢谢！

这是信息页面的标签部分：

tabpanel

Answer 1

我尝试了一些Javascript。

在li内的ul.nav.nav-tabs元素中添加一个标识符，这样可以通过发送的参数轻松实现，例如：

<li role="presentation" id="terms-li">
  ...
</li>

然后，您的div代码与role="tabpanel"相同，如：

<div role="tabpanel" class="tab-pane fade" id="terms-tab">
  ...
</div>

然后在previouse视图中，您可以添加link_to帮助程序，传递要激活的选项卡，例如：

<p>
  View the terms & conditions on our info page 
  <%= link_to 'here', root_path(tab: 'terms') %>, thanks.
</p>

然后在视图中选项卡的位置，添加一个带params[:tab]的脚本并检查它们是否已发送，如果是，则获取li和div个元素，从第一个active中移除课程li，并将活动添加到新元素：

<script>
  if ('<%= params[:tab] %>' !== '') { 
    let params = '<%= params[:tab] %>',
        li = document.getElementById(params + '-li'),
        tab = document.getElementById(params + '-tab'),
        ul = document.querySelectorAll('ul.nav.nav-tabs > li')[0].classList,
        div = document.querySelectorAll('div.tab-content > div')[0].classList

    ul.remove('active')
    div.remove('in', 'active')
    li.classList.add('active')
    tab.classList.add('in', 'active')
  }
</script>

确保标识terms-tab以及每个角色tabpanel的div的所有标识符都等于anchor标记中的href属性。

您可以看到here一个有效的演示。

Answer 2

您可以使用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），则可以通过将活动类添加到＆＃34; li＆＃34;元素，像这样：

  <li role="presentation active">
    <a href="#advertise" aria-controls="advertise" role="tab" data-toggle="tab">
      Advertise
    </a>
  </li>

因此，无论您在何处放置指向该信息页面的链接，都应该传递一个指示哪个标签处于活动状态的参数，如下所示：

link_to "more info", info_path(active_tab: "advertise")

然后，在您的信息页面上，检查参数[：active_tab]以确定哪个选项卡处于活动状态。类似的东西：

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

希望这说清楚！此外，必须测试它，但认为这工作

Answer 3

在这里发布我的解决方案，以防有人需要它。

如果没有参数，我想有一个默认选项。我正在使用 Bootstrap's Navs。

...
    x:Key="RoundHoverButtonStyle"
    BasedOn="{StaticResource StandardButtonStyle}"
    TargetType="{x:Type Button}">
    <Style.Resources>
        <Style TargetType="Border">
            <Setter Property="CornerRadius" Value="100" />
        </Style>
    </Style.Resources>
...
<Grid Grid.Column="0" ShowGridLines="True">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Viewbox Stretch="Uniform">
        <Button
            x:Name="Button0"
            Grid.Row="1"
            Grid.Column="0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Background="Black"
            Content="{Binding Path=ButtonConfigModel.ButtonDict[Button0].DisplayName}"
            Foreground="White"
            Style="{StaticResource RoundHoverButtonStyle}"
            Tag="{Binding Path=ButtonConfigModel.ButtonDict[Button0].VirtualKey}"
            Visibility="{Binding Path=ButtonConfigModel.ButtonDict[Button0].IsEnabled, Converter={StaticResource BoolToVis}}" />
    </Viewbox>
...

# Passing a params on 'link_to' method

# View with links

<%= link_to "Tab Index", tabs_path %>
<%= link_to "Tab 1", tabs_path(tab: 'tab_1') %>
<%= link_to "Tab 2", tabs_path(tab: 'tab_2') %>
<%= link_to "Tab 3", tabs_path(tab: 'tab_3') %>

如何链接到页面并使用rails激活特定选项卡

3 个答案: