根据链接更改选项卡答案

【问题标题】：Change tabs according to the link根据链接更改选项卡
【发布时间】：2016-06-24 00:59:28
【问题描述】：

如何通过链接切换标签？

这是我现在的状态

<div class="tabbable-panel">
  <div class="tabbable-line">
    <ul class="nav nav-tabs">
      <li class="active">
        <a href="#tab_below_1" data-toggle="tab">Home</a>
      </li>
      <li class="">
        <a href="#tab_below_2" data-toggle="tab">Sources</a>
      </li>
      <li>
        <a href="#tab_below_3" data-toggle="tab">Contact Us</a>
      </li>
    </ul>
  </div>
</div>

我可以很好地在选项卡之间切换，但是当我尝试让 href 指向另一个链接时，它不起作用。当我改变时

<a href="#tab_below_1" data-toggle="tab">Home</a>

到

<a href="mysite.com/home" data-toggle="tab">Home</a>

它不起作用。但后来我尝试删除 data-toggle 并打开链接，但它没有显示该选项卡处于活动状态。

【问题讨论】：

我可以通过删除 bootstrap.min.js 文件来复制您的问题 -codepen.io/nagasai/pen/JKEYod
您可以尝试在锚标记中添加 onclick 事件 -onclick="location.href='mysite.com/home'" 吗？
Linking to a Bootstrap Tab from outside - how to set the tab to "active"?的可能重复

标签： html twitter-bootstrap

【解决方案1】：

删除数据切换并将其替换为class="active"

<div class="tabbable-panel">
    <div class="tabbable-line">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tab_below_1">Home</a></li>
            <li><a href="#tab_below_2">Sources</a></li>
            <li><a href="#tab_below_3">Contact Us</a></li>
        </ul>
    </div>
</div>

【讨论】：

它转到页面但它不会使选项卡处于活动状态。当<li> 处于活动状态时，它应该改变背景，但当我用class="active" 替换它时它不会改变@

【解决方案2】：

可能有两个问题

1. bootstrap.min.js file is not added to the page

2.Specify the data-toggle="tab" on each tab, as well as create a .tab-pane with unique ID for every tab and wrap them in .tab-content.

Codepen-http://codepen.io/nagasai/pen/JKEYod

【讨论】：

id 应该是另一个页面。例如，我的网站是mysite.com/index.php，当我点击联系人选项卡时，它转到mysite.com/contact-us.php。顺便说一句，我检查了一下，我在页面上加载了 bootstrap.min.js 文件

【解决方案3】：

我通过使用一些 php 解决了这个问题。这是我的代码

	<div class="tabbable-panel">
		<div class="tabbable-line">
				<?php 
				$hom = @_URL.'/home.php'; 
				$sorc = @_URL.'/sources.php';
				$cont = @_URL.'/contact.php';
				$link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"
				 ?>
			<ul class="nav nav-tabs">
				<li class="<?php if($link==$hom){echo "active";}else{echo "";}  ?>">
					<a  href="<?php echo $hom ?>">Home</a>
				</li>
				<li class="<?php if($link==$sorc){echo "active";}else{echo "";}  ?>">
					<a href="<?php echo $sorc ?>">Sources</a>
				</li>
				<li class="<?php if($link==$cont){echo "active";}else{echo "";}  ?>">
					<a href="<?php echo $cont ?>">Contact Us</a>
				</li>
			</ul>
		</div>
	</div>

现在完美运行

【讨论】：