Question

如何使用链接切换标签？

这是我目前的状态

<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并打开链接，但没有显示该标签处于活动状态。

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

Answer 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

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

现在它完美无缺

根据链接更改选项卡

3 个答案: