从外部打开活动标签页 link

Question

我正在和 bootstrap 3 一起做一个项目。我想 link 从 "home" 页面转到特定打开的选项卡。我阅读并测试了很多机会，但没有任何效果。

我的最新消息：

$activetabbuehne = (params.activeTab is null or params.activeTab == 'tab_a') ? 'class="active"' : '';
$activetabhoehe = (params.activeTab == 'tab_b') ? 'class="active"' : '';
$activetabaudio = (params.activeTab == 'tab_c') ? 'class="active"' : '';
$activetabstudio = (params.activeTab == 'tab_d') ? 'class="active"' : '';
$activetabsonder = (params.activeTab == 'tab_e') ? 'class="active"' : '';
$activetabinstall = (params.activeTab == 'tab_f') ? 'class="active"' : '';

<ul class="nav nav-pills nav-stacked col-xs-12 col-md-4">
  <li $activetabbuehne><a href="#tab_a" data-toggle="pill" style="font-weight:500;">BÜHNENBAU<span style="font-weight:500; float:right;font-weight: 700;float: right;font-size: 23px;color: #db001b;">+</span></a></li>
  <li $activetabhoehe><a href="#tab_b" data-toggle="pill" style="font-weight:500;">HÖHENARBEITEN<span style="font-weight:500; float:right;font-weight: 700;float: right;font-size: 26px;color: #db001b;">+</span></a></li>
  <li $activetabaudio><a href="#tab_c" data-toggle="pill" style="font-weight:500;">AUDIO-, VIDEO-, LICHTTECHNIK<span style="font-weight:500; float:right;font-weight: 700;float: right;font-size: 23px;color: #db001b;">+</span></a></li>
  <li $activetabstudio><a href="#tab_d" data-toggle="pill" style="font-weight:500;">STUDIO<span style="font-weight:500; float:right;font-weight: 700;float: right;font-size: 23px;color: #db001b;">+</span></a></li>
  <li $activetabsonder><a href="#tab_e" data-toggle="pill" style="font-weight:500;">SONDERLÖSUNGEN<span style="font-weight:500; float:right;font-weight: 700;float: right;font-size: 23px;color: #db001b;">+</span></a></li>
  <li $activetabinstall><a href="#tab_f" data-toggle="pill" style="font-weight:500;">INSTALLATIONEN<span style="font-weight:500; float:right;font-weight: 700;float: right;font-size: 23px;color: #db001b;">+</span></a></li>
</ul>

这是我用于 dev.page 测试的 Link:

https://amphire.de/dev/leistungen/?activeTab=tab_a

感谢您的帮助。

Answer 1

一个可能的 JavaScript 解决方案是触发参数指定的 link 上的点击事件。它会像这样工作：

从URL读取参数（可以用这个solution by Haim Evgi）
页面显示link后，触发对应link的点击。

这将是一个示例代码：

<ul class="nav nav-pills nav-stacked col-xs-12 col-md-4">
  <li><a href="#tab_a" data-toggle="pill" style="font-weight:500;">BÜHNENBAU<span style="font-weight:500; float:right;font-weight: 700;float: right;font-size: 23px;color: #db001b;">+</span></a></li>
  <li><a href="#tab_b" data-toggle="pill" style="font-weight:500;">HÖHENARBEITEN<span style="font-weight:500; float:right;font-weight: 700;float: right;font-size: 26px;color: #db001b;">+</span></a></li>
  <li><a href="#tab_c" data-toggle="pill" style="font-weight:500;">AUDIO-, VIDEO-, LICHTTECHNIK<span style="font-weight:500; float:right;font-weight: 700;float: right;font-size: 23px;color: #db001b;">+</span></a></li>
  <li><a href="#tab_d" data-toggle="pill" style="font-weight:500;">STUDIO<span style="font-weight:500; float:right;font-weight: 700;float: right;font-size: 23px;color: #db001b;">+</span></a></li>
  <li><a href="#tab_e" data-toggle="pill" style="font-weight:500;">SONDERLÖSUNGEN<span style="font-weight:500; float:right;font-weight: 700;float: right;font-size: 23px;color: #db001b;">+</span></a></li>
  <li><a href="#tab_f" data-toggle="pill" style="font-weight:500;">INSTALLATIONEN<span style="font-weight:500; float:right;font-weight: 700;float: right;font-size: 23px;color: #db001b;">+</span></a></li>
</ul>

<script type="text/javascript">

// function from 
function gup( name, url ) {
  if (!url) url = location.href
  name = name.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");
  var regexS = "[\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( url );
  return results == null ? null : results[1];
}

// get the value of the activeTab parameter
var targetTab = gup("activeTab", window.location.href);

// trigger the click so that tab activates and shows content
$("a[href='#" + targetTab + "']").click();

</script>

从外部打开活动标签页 link

Open an active tab from external link

javascript

tabs

twitter-bootstrap