2011-11-01 192 views
0

我目前正在爲站點構建一個管理控制面板,我和一些好友正在啓動。我希望面板在左側包含一個菜單,用於切換顯示在右側中間主頁上顯示的內容。所以基本上菜單是由按鈕組成的,當點擊一個按鈕時,我希望它改變可見的內容。這可能與JavaScript?如果是這樣,有沒有人知道如何鏈接到HTML?我給JavaScript標記函數調用的某種標識符嗎?我知道我的問題可能看起來很模糊,但在這個問題上的任何幫助將不勝感激。管理面板中的動態內容

+0

我可能是錯的,但它聽起來像你想要使用三個選項之一來獲得這些結果:1)幀,2)iframes,3)ajax。 JavaScript將涉及所有三個實例。你想用哪三種? – James

+1

@James你也可以通過隱藏和顯示父容器div中正確的div來實現。 –

回答

0

你可以用jQuery來做到這一點。它會是這樣的:

<head> 
    <script type="text/javascript"> 
     function loadPage(thePage) 
     { 
      $.ajax({ 
       type: 'GET', 
       url: thePage, 
       success: function(response) { 
        $('#main_content').html(response); 
       }, 
       dataType: 'html' 
      }); 
     } 

     $(document).ready(function() { 
      // I just imagine you have some php pages here 
      $('#add_employee').click = loadPage('AddEmployee.php'); 
      $('#show_employee').click = loadPage('ShowEmployees.php'); 
     }); 
    </script> 
</head> 
<body> 
    <div id="left_panel"> 
     <a href="#" id="add_employee">Add employee</a> 
     <a href="#" id="show_employee">Show employees</a> 
    </div> 

    <div id="main_content"> 
     // This is your main content on the right of the admin panel 
    </div> 
</body> 
0

你可以使用像simpleTabs和JQuery的東西。我在這裏創建了一個演示,http://jsfiddle.net/6kN5M/

基本上忽略CSS佈局,如果你想。要從標記中理解的主要內容是第一個標籤/按鈕突出顯示,並顯示第一個內容。當你舔另一個標籤/按鈕時,它會顯示其他內容。您可以根據需要添加儘可能多的選項卡。