Question

 <!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>

此代码中的切换功能未按预期工作，但单击时显示#menu项目并不会始终隐藏它们。

Answer 1

您正在淡出<div>，但在切换时引用了<a>，您需要淡化<div>，如下所示：

这：$('#menu div a').not(this)
需要：$('#menu div').not(this)

这将带来正确的褪色元素，如你所愿。 Here's an updated sample with some other tweaks to slim it down as well

jQuery切换功能无法按预期工作

1 个答案: