JQUERY Меню аккордеона с открытием вкладок

Код предназначен для сгенерированной домашней страницы с двумя div: 'left_menu' и 'right_menu', где я хочу перемещаться по ссылкам из left_menu, должен отображать содержимое в right_menu.JQUERY Меню аккордеона с открытием вкладок

У меня есть две ссылки (отчеты и роли) слева и две вкладки (tab1 и tab2) справа_меню.

Когда я нажимаю на отчеты, он должен открыть вкладку 1 и нажимать на пользователям следует открыть вкладку2.
Когда я запускаю 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 Fiddle: http://jsfiddle.net/gansai/s9NvX/1/

источник

2014-05-27 ronquiq

так это страница должна загрузить, когда отчеты/пользователь нажал? – Runcorn

Да, Pawal..это это .. Спасибо – ronquiq

Pawal: Я тоже дал скрипку JS. Пожалуйста, дайте мне ваше предложение – ronquiq

Ваш вопрос очень расплывчатый и скрипка мало помогает, так как код неясен.

Если вы хотите элементы страницы должны быть предварительно настроены на странице загрузки, вам необходимо:

Есть ссылки на страницы содержат параметры GET (ака query string), представляющие элементы состояния. Например:
```
<a href="report.php&tab=1">Reports</a> 
```
Элементы считывают параметры GET при инициализации и применяют конфигурацию. Решение:

How can I get query string values in JavaScript?

источник

2014-05-27 10:32:12

JQUERY Меню аккордеона с открытием вкладок

ответ

Смежные вопросы