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>
此代碼中的切換功能,如預期,雖然它顯示了#menu項目時,點擊它並不能掩蓋他們總是不工作。
嘗試發佈將複製行爲/錯誤的較小代碼。這會讓你得到更好的答案。 – 2010-03-22 10:14:45
哪個切換功能?你想要的確切行爲是什麼?剛花了5分鐘時間看着你的螢火蟲頁面,發生了一些似乎錯誤的事情,其他人看起來好像工作得很好,但我怎麼知道你打算怎麼樣? – 2010-03-22 14:28:03