我需要知道如何将(通过不同页面上的常规href锚点)链接到不是默认选项卡的选项卡内的内容。可以这样做吗?我的代码将有希望解释我的要求:
我的代码:
javascript:
<script src="Javascript/jquery-1.4.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();
$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
$(function () {
var tabs = [];
var tabContainers = [];
$('ul.tabs a').each(function () {
// note that this only compares the pathname, not the entire url
// which actually may be required for a more terse solution.
if (this.pathname == window.location.pathname) {
tabs.push(this);
tabContainers.push($(this.hash).get(0));
}
});
// sniff for hash in url, and create filter search
var selected = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first';
$(tabs).click(function () {
// hide all tabs
$(tabContainers).hide().filter(this.hash).show();
// set up the selected class
$(tabs).removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(selected).click();
});
</script>
html和PHP(部分):
<div class="tabs">
<ul class="tabNavigation">
<li><a href="#account_div">Account</a></li>
<li><a href="#change_password_div">Password</a></li>
<li><a href="#favorites_div">Favorites</a></li>
<li><a href="#avatar_div">Avatar</a></li>
</ul>
<div id="account_div">
<?php include("personal_info_edit.php"); ?>
</div>
<div id="change_password_div">
<?php include("change_password.php"); ?>
</div>
<div id="favorites_div">
<?php include("favorites.php"); ?>
</div>
<div id="avatar_div">
<?php include("avatar.php"); ?>
</div>
</div>
以下内容包含在我的change_password_submit.php页面中:
$update_pass= ("Password changed successfully.");
header("location:profile_edit.php?update_pass=$update_pass#change_password_div");
exit();
默认情况下,无论何时加载profile_edit.php,都会显示personal_info_edit div,并隐藏其他div。我需要更改代码以便我可以引用第二个div(即.change_password div并在有人更改密码后隐藏其余部分? 任何帮助将不胜感激。
答案 0 :(得分:1)
这可能不是最优雅的解决方案,但它应该有效。
你可以让PHP嗅探你的url变量是否存在特定变量。我可能会称之为'selectedTabId'之类的东西。然后,如果该变量存在,您可以让jQuery在该选项卡上调用click
操作。你需要使用switch / case来实现这一点,而不仅仅是发送URL中的任何内容,因为人们可以在那里放置你不希望你的jQuery运行的讨厌的东西。为了方便起见,我不会在下面的例子中这样做。
这是一个名义上的例子......
<?php
if( array_key_exists('selectedTabId',$_GET) ){
$selectedTabId = $_GET['selectedTabId'];
echo "<script type=\"text/javascript\">";
echo "jQuery(document).ready(function(){'#$selectedTabId').click()});";
echo "</script>";
}
?>
试一试,看看它是否适合你。
答案 1 :(得分:0)
我使用这个缩小版:http://flowplayer.org/tools/tabs/index.html
它为你做到了。它也做了很多。可能值得实施而不是自定义解决方案?
以下是其中的一个示例:http://www.estanciaboerne.com/amenities#TAB2entertainment
(这实际上并没有教会你什么,但它是你问题的解决方案,所以我很抱歉,欢迎你们一个人。)