2010-03-22 25 views
0
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
    $(function(){ 
     $('div#menu div') 
     .bind('mouseover',function(event){ 
      popHelp(this); 
      }) 
     .bind('mouseout',function(event){ 
      clearHelp(); 
     }) 
     .toggle(
      function(event){$('#menu div a').not(this).css('opacity',1);$(event.target).css('opacity',0.4)}, 
      function(event){$(event.target).css('opacity',1)} 
      ) 
     $('div.item').not('#mainPage') 
     .hide() 
     $('#customerManagement').click(function(event){ 
       $('.item').hide('slow'); 
       $('#customerManagementCon').toggle('slow'); 
       return false; 
      }) 
     $('#userManagement').click(function(){ 
      $('.item').hide('slow'); 
      $('#userManagementCon').toggle('slow'); 
      return false; 
      }) 
     $('#storageManagement').click(function(){ 
      $('.item').hide('slow'); 
      $('#storageManagementCon').toggle('slow'); 
      return false; 
      }) 
     $('#searchManagement').click(function(){ 
      $('.item').hide('slow'); 
      $('#searchManagementCon').toggle('slow'); 
      return false; 
      }) 
     $('#signOff').click(function(){ 
      $('.item').hide('slow'); 
      $('#signOffCon').toggle('slow'); 
      return false; 
      }) 
    } 
    ); 

    function popHelp(ref){ 
     var text; 
     if(ref.id=="customerManagement") 
      text="click here for customer management"; 
     else if(ref.id=="userManagement") 
      text="click here for user management"; 
     else if(ref.id=="storageManagement") 
      text="click here for storage management"; 
     else if(ref.id=="searchManagement") 
      text="search management"; 
     else if(ref.id=="signOff") 
      text="click here to sign off"; 
     $('#helpConsole').append('<div class="help">'+text+'<div>'); 
     } 
    function clearHelp(){ 
     $('#helpConsole > div').remove(); 
    } 

    </script> 
    <style type="text/css" > 
     #helpConsole 
     { 
      background-color:Aqua; 
      margin-left:500px; 
      width:300px; 
      height:100px; 
      outline-width:medium; 
     } 
    </style> 
</head> 
<body> 
    <div id="menu"> 
    <table border="2"> 
     <thead> 
     <tr>        
      <th colspan="5">Welcome $Employee Name</th> 
     </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td><div id="customerManagement" class="menuItem"><a>Customer Management</a></div></td> 
       <td><div id="userManagement" class="menuItem"><a>User Management</a></div></td> 
       <td><div id="storageManagement" class="menuItem"><a>Storage Management</a></div></td> 
       <td><div id="searchManagement" class="menuItem"><a>Search Management</a></div></td> 
       <td><div id="signOff" class="menuItem"><a>Sign Off</a></div></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 
<div id="helpConsole"><h3>help</h3></div> 
<div id="mainPage" class="item"><h1>Storage Service</h1></div> 
<div id="customerManagementCon" class="item"> 
    <h3>Customer Management</h3> 
    </div> 
    <div id="userManagementCon" class="item"> 
    <h3>User Management</h3> 
    </div> 
    <div id="storageManagementCon" class="item"> 
    <h3>Storage Management</h3> 
    </div> 
    <div id="searchManagementCon" class="item"> 
    <h3>Search Mangement</h3> 
    </div> 
    <div id="signOffCon" class="item"> 
    <h3>Sign Off</h3> 
    </div> 
<div id="menuItemCon" class="item">menuItem</div> 
</body> 

jQuery的切換功能無法正常運行

此代碼中的切換功能,如預期,雖然它顯示了#menu項目時,點擊它並不能掩蓋他們總是不工作。

+0

嘗試發佈將複製行爲/錯誤的較小代碼。這會讓你得到更好的答案。 – 2010-03-22 10:14:45

+1

哪個切換功能?你想要的確切行爲是什麼?剛花了5分鐘時間看着你的螢火蟲頁面,發生了一些似乎錯誤的事情,其他人看起來好像工作得很好,但我怎麼知道你打算怎麼樣? – 2010-03-22 14:28:03

回答