目前我使用jquery ui TABS
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$('#tabs').tabs({
beforeActivate: function (event, ui) {
window.location.hash = ui.newPanel.selector;
}
});
});
</script>
</head>
<body>
<form name="input" action="post.php" target="my_iframe1" method="post">
Summoner Name: <input type="text" name="name"><br>
Region:<select name="region">
<option value="euw">Western Europe</option>
<option value="eune">North Europe</option>
<option value="na">North America</option>
</select><br>
<input type="submit" value="Submit">
</form>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#ranked">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
ed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
</body>
</html>
//home
echo "<pre>";
echo "<h2>Summoner Info</h2>";
foreach ($str3 as $objects) {
echo "<pre>";
$name = $str3->name;
$level = $str3->summonerLevel;
$prid = $str3->profileIconId;
$imglink = "http://lkimg.zamimg.com/shared/riot/images/profile_icons/profileIcon".$prid.".jpg";
echo("<table border='1'><tr><th>Summoner Icon </th><th>Summoner Name </th><th>Summoner Level </th></tr>'n");
echo("<tr><td><center><img width='32px' height='32px' src='"$imglink'" alt='"Cover'"></center></td><td><center>$name</center></td><td><center>$level</center></td>'n");
echo("</table>");
break;
}
//ranked
echo "<pre>";
echo "<h2>Ranked Stats</h2>";
foreach($str4['champions'] as $row){
//get the values, dont really need to reassign but you get the idea
$id = $row['id'];
$name = $row['name'];
$played = $row['stats']['totalSessionsPlayed'];
$lost = $row['stats']['totalSessionsLost'];
$won = $row['stats']['totalSessionsWon'];
$imglink = "http://lkimg.zamimg.com/shared/riot/images/champions/".$id."_32.png";
if ($name == "Combined"){
$totalplayed = $row["stats"]["totalSessionsPlayed"];
$totallost = $row["stats"]["totalSessionsLost"];
$totalwon = $row["stats"]["totalSessionsWon"];
continue;
}
echo("<font color='white'>");
echo("<table border='1'><tr><th>Champion</th><th>Games Played</th><th>Won</th><th>Lost</th></tr>'n");
echo("<tr><td><img width='32px' height='32px' src='"$imglink'" alt='"Cover'"></td><td><center>$played</center></td><td><center>$won</center></td><td><center>$lost</center></td>'n");
echo("</table>");
}
echo("<table border='1'>");
echo("<tr><th>Total Games Played</th><th>Won</th><th>Lost</th></tr>'n");
echo("<tr><td><center>$totalplayed</center></td><td><center>$totalwon</center></td><td><center>$totallost</center></td>'n");
echo("</table>");
所以我寻找的是隐藏标签提交到post.php时，使标签出现，但当切换到TAB 3，这是#排名，它只拉下//排名的数据，当我切换到home，它只使用//home下的数据这是可能的吗?
就像是预加载的但是当你切换标签时它会显示不同的数据
问候
我将使用JavaScript事件来检查用户何时提交或是否切换选项卡。既然已经使用了jQuery，为什么不直接使用:$("element")监听这些事件呢?("改变",回调)
这将有助于减少与后端通信的数量。