基本上，我有一个由<li>和<a>组成的带有引导程序的"选项卡"系统。代码如下
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li name="tab" class="active"><a href="#unchecked"data-toggle="tab">Unchecked</a></li>
<li name="tab" ><a href="#leave" data-toggle="tab">Leave as is</a></li>
<li name="tab" ><a href="#add" data-toggle="tab">Add new</a></li>
<li name="tab" ><a href="#up" data-toggle="tab">Uploaded</a></li>
<li name="tab" ><a href="#app" data-toggle="tab">Approved</a></li>
</ul>
我想实现的是，每次推送"选项卡"时，我都想将整个页面刷新到新的选项卡上，而不是切换到它，可能使用$GET，这样就不必在只有一个选项卡处于活动状态的情况下加载每个选项卡的内容。
如果使用jquery库：
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li id="unchecked" name="tab" class="active"><a href="#unchecked"data-toggle="tab">Unchecked</a></li>
<li id="leave" name="tab" ><a href="#leave" data-toggle="tab">Leave as is</a></li>
<li id="add" name="tab" ><a href="#add" data-toggle="tab">Add new</a></li>
<li id="up" name="tab" ><a href="#up" data-toggle="tab">Uploaded</a></li>
<li id="app" name="tab" ><a href="#app" data-toggle="tab">Approved</a></li>
</ul>
<div id="tabresult"></div>
<script>
$(document).ready(function() {
$("#tabs li a").click(function(e){
e.preventDefault();
// you can use .get method but i prefer post
$.post('tabbody.php', {tab:$(this).parent()[0].id}, function(r) {
// do what you want to change
$("#tabresult").html(r);
});
});
});
</script>
</body>
</html>
和您的tabody.php脚本：
<?php
if (isset($_REQUEST['tab']))
switch ($_REQUEST['tab']) {
case 'unchecked':
echo '<div>Unchecked body</div>';
break;
case 'leave':
echo '<div>leave body</div>';
break;
case 'add':
echo '<div>add body</div>';
break;
case 'up':
echo '<div>up body</div>';
break;
case 'app':
echo '<div>app body</div>';
break;
}
?>