saranya_gansai
-
Posts
1 -
Joined
-
Last visited
saranya_gansai's Achievements
Newbie (1/5)
0
Reputation
-
The code is for generated a home page with two div's: 'left_menu' and 'right_menu', where I want to navigate with the links from left_menu should display the content on the right_menu. I have two links (reports and roles) on the left_menu and two tabs (tab1 and tab2) on the right_menu. 1. When I click on reports, it should open the tab1 and clicking on users should open the tab2. 2. When I launch home.php, the first item(reports) should be opened by default and the tab1 accordingly. Here is the my code I tried, when I click the roles on left_menu, it is opening the default one i.e. tab1 and the left_menu isn't opened by default. 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/