Question

该代码用于生成一个带有两个div的主页：'left_menu'和'right_menu'，我想要使用left_menu中的链接导航，应该在right_menu上显示内容。

我在left_menu上有两个链接（报告和角色），右边菜单上有两个标签（tab1和tab2）。

当我点击报告时，应该打开tab1并单击用户应该打开tab2。
当我启动home.php时，应该打开第一个项目（报告）默认和tab1相应。

这是我尝试过的代码，当我点击left_menu上的角色时，它会打开默认值，即tab1，默认情况下不会打开left_menu。

home.php

<html lang="<?php echo _SITE_LANGUAGE ?>">
   <head>   
    <script src="../js/jqueryv1.10.2.js"></script>
    <script type="text/javascript">

       //accordion left menu
       $ (document).ready(function()
       {
          $ (".wings").click(function(event)
          {
             $(".box").slideUp("slow");
             if ($(this).next().is(":hidden") == true)
             {
                $(this).next().slideDown("slow");
             }
          });
          //(".box").hide("slow");
       });

       //Tab (rightbox)
       $(document).ready(function() 
       {    
         $('#tabs li a:not(:first)').addClass('inactive');
         $('.contain').hide();
         $('.contain:first').show();

         $('#tabs li a').click(function()
         {
            var t = $(this).attr('id');
            if($(this).hasClass('inactive'))
            { //this is the start of our condition 
              $('#tabs li a').addClass('inactive');         
              $(this).removeClass('inactive');
              $('.contain').hide();
              $('#'+ t + 'C').fadeIn('slow');
            }
         });
       });

      </script>
    <style>
      .wings { width:200px; float:left; padding:7px 11px; }
      .box { width:195px; float:left; display:none; margin:0px 20px; }
    </style>
   </head>

   <body>
     <?php
        echo '<div class="left_menu">

               <div class="wings">
                <div style="float:left;"><img src="images/right_arrow.gif"/></div>
                <div style="float:left;padding:0px 7px;"><a href="display.php"><a href="report.php">Reports</a></div>
                <div style="float:right;"><img src="images/downarrow.png" style="width:17px;height:17px;cursor:pointer;"/></div>
               </div>

               <div class="box">';
                $reports = $reports->get_report();
                $reports_count = count($reports);
                if ($reports_count > 0 ) {
                   foreach ($reports as $ds)
                   {
                      echo '<div style="float:left;margin:5px 14px;width:180px;">
                               <div style="float:left;"><img src="images/right_arrow.png"></div>
                               <div style="float:left;padding:0px 6px;">'.$ds['dsource_name'].'</img></div>
                               <div style="float:left;"><a href="edit_dsource.php?id='.$ds['id'].'"><img src="images/edit.gif"/></a></div>
                               <div style="float:left;padding:1px 2px;"><img src="images/not-available.png"/></div>                           
                            </div>';
                   }
                }
                else
                echo 'No Datasources';  
               echo '</div>

               <div class="wings">
                <div style="float:left;"><img src="images/right_arrow.gif"/></div>
                <div style="float:left;padding:0px 7px;"><a href="display.php"><a href="report.php">Roles</a></div>
                <div style="float:right;"><img src="images/downarrow.png" style="width:17px;height:17px;cursor:pointer;"/></div>
               </div>

               <div class="box">';
                $roles = $roles->get_report();
                $roles_count = count($roles);
                if ($roles_count > 0 ) {
                   foreach ($roles as $ds)
                   {
                      echo '<div style="float:left;margin:5px 14px;width:180px;">
                               <div style="float:left;"><img src="images/right_arrow.png"></div>
                               <div style="float:left;padding:0px 6px;">'.$ds['dsource_name'].'</img></div>
                               <div style="float:left;"><a href="edit_dsource.php?id='.$ds['id'].'"><img src="images/edit.gif"/></a></div>
                               <div style="float:left;padding:1px 2px;"><img src="images/not-available.png"/></div>                           
                            </div>';
                   }
                }
                else
                echo 'No Datasources';  
               echo '</div>';

        echo '</div> <!--left_menu-->';  

        echo '<div class="right_menu">
               <ul id="tabs">
                  <li><a id="tab1">Configuration</a></li>     
                  <li><a id="tab2">Report Viewer</a></li>
               </ul>

               <div class="container" id="tab1C">
                  <div id="content" style="padding-left:35px;"><h3><font color="brown"> </font><br>
                     ( Report Tab content )               
                  </div>
               </div>

               <div class="container" id="tab2C">
                  <div id="content" style="padding-left:35px;"><h3><font color="brown"> </font><br>
                     ( Report Tab content )               
                  </div>
               </div>';                  
        echo '</div><!--right_menu-->';
    ?>
   </body>
</html>

JS小提琴：http://jsfiddle.net/gansai/s9NvX/1/

Answer 1

你的问题非常模糊，因为代码模糊不清，所以小提琴没有什么帮助。

如果您希望在页面加载时预先配置页面元素，则应该：

指向页面的链接包含表示元素状态的GET参数（又名query string）。例如：
```
<a href="report.php&tab=1">Reports</a>
```
让元素在初始化时读取GET参数并应用配置。解决方案：

How can I get query string values in JavaScript?

带有标签打开的JQUERY Accordion菜单

1 个答案: