0
我是一個HTML/CSS編碼器和IM只是使用JavaScript可怕,但我嘗試懸停狀態,它使我的網站更有效,更好看。我已經給我的按鈕一個效果,這裏是我的按鈕的HTML和JQUERY。使用jQuery保持導航按鈕時,相應的頁面加載
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="favicon.ico">
<meta http-equiv="Content-Type" content="text/html" />
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js.js"></script>
<script type="text/javascript" src="lightbox/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="lightbox/css/jquery.lightbox-0.5.css" media="screen" />
#info {
width:250px;
height:auto;
min-height:658px;
background:url('images/bgdiv.gif') no-repeat right center;
float:left;
}
#info ul {
width:225px;
height:auto;
margin-top:75px;
display:block;
}
#info ul li a {
font-family:helvetica;
font-size:17px;
font-weight:bold;
letter-spacing:1px;
text-align:center;
color:#fff;
width:85px;
height:27px;
line-height:29px;
background:#3d526c;
float:right;
list-style-type:none;
display:block;
text-decoration:none;
}
<style>
<title>Alex S. Construction</title>
</head>
<body>
<div id="info">
<ul id="categories">
<li><a href="index.html">Interior</a></li><br>
<li><a href="exterior.html">Exterior</a></li><br>
<li><a href="gates.html">Gates</a></li><br>
<li><a href="doors.html">Doors</a></li><br>
<li><a href="misc.html">Misc.</a></li><br>
</ul>
</div><!--INFO-->
</body>
</html>
這裏是影響該按鈕的JavaScript,
$(document).ready(function(){
$('#info ul li a').hover(function() {
$(this).stop().animate({"width": "150"}, "fast");
}, function() {
$(this).stop().animate({"width": "85"}, "fast");
var hash = window.location.hash.substr(1);
var href = $('#info ul li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #gallery';
$('#gallery').load(toLoad)
}
});
$('#categories ul li').click(function(){
var toLoad = $(this).attr('href')+' #gallery';
$('#gallery').hide('fast',loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#gallery').load(toLoad,'href',showNewContent())
}
function showNewContent() {
$('#gallery').show('normal');
}
return false;
});
});
});
IM使用jQuery也加載網頁主要內容DIV,我想acheive導航按鈕的效果放在住當相應的頁面被加載時它們的懸停狀態。這樣用戶就可以知道他在哪個類別,並且該指標也是導航在空間使用中更有效但仍然有效。非常感謝您的閱讀,我希望儘快回覆。
我找到了解決方案,無需使用Java,因爲它是複雜的,甚至是沒有爲我工作。謝謝你,雖然我感謝你的時間。 – user749183 2011-05-12 03:35:41