Question

首先感谢你的时间。

问题：我正在尝试从多个不同的地方链接到我的网络应用程序上的个人资料页面，如何才能将按钮重定向到此页面上的某个标签？

  <div class="row">
<div class="col-lg-12">
  <div class="card card-tab">
    <div class="card-header">
      <ul class="nav nav-tabs">
        <li role="tab1" class="active">
          <a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Profile</a>
        </li>
        <li role="tab2">
          <a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Alerts</a>
        </li>
        <li role="tab3">
          <a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">Settings</a>
        </li>
        <sec:authorize access="hasRole('ADMIN')">
        <li role="tab4">
          <a href="#tab4" aria-controls="tab4" role="tab" data-toggle="tab">Admin</a>
        </li>
        </sec:authorize>
      </ul>
    </div>

当我点击一个标签时，我可以看到它将修改/ profile＃tab1 / 2/3等网址，但是直接链接到该标签只会显示个人资料页面。

https://github.com/symonk/Release-Management/blob/master/Releases/src/main/webapp/WEB-INF/views/profile.jsp

我猜一些Javascript会做的伎俩，但我不确定从哪里开始

Answer 1

我浏览了你给的链接，你使用Bootstrap作为标签，我注意到你也使用了jQuery。您的解决方案可能是在URL中使用锚点并基于此激活选项卡。例如，如果您转到http://sample-env.qp3bsthmnq.eu-west-2.elasticbeanstalk.com/profile#tab3

在您的代码中添加了此内容后

var loadTab = function() {
    var tabId = location.hash;
    if(tabId !== undefined && $('.nav-tabs a[href="' + tabId + '"]') !== undefined) {
        $('.nav-tabs a[href="' + tabId + '"]').tab('show');
    }
};

$(document).ready(function() {
    loadTab();
});

这必须激活id为＃tab3

的标签

如何通过Web应用程序上的链接加载选项卡？

1 个答案: