帮助jquery选项卡

时间:2011-01-13 17:03:34

标签: php javascript jquery

我需要知道如何将(通过不同页面上的常规href锚点)链接到不是默认选项卡的选项卡内的内容。可以这样做吗?我的代码将有希望解释我的要求:

我的代码:

以下是我的profile_edit.php页面:

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并在有人更改密码后隐藏其余部分? 任何帮助将不胜感激。

2 个答案:

答案 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

(这实际上并没有教会你什么,但它是你问题的解决方案,所以我很抱歉,欢迎你们一个人。)