使用jQuery保持導航按鈕時，相應的頁面加載

我是一個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導航按鈕的效果放在住當相應的頁面被加載時它們的懸停狀態。這樣用戶就可以知道他在哪個類別，並且該指標也是導航在空間使用中更有效但仍然有效。非常感謝您的閱讀，我希望儘快回覆。

來源

2011-05-11 user749183

$('div#info ul.catagories a').click(function() { 
    $('div#info ul.catagories a').removeClass('selected'); 
    $(this).addClass('selected'); 
});

風格：

#selected { 
    background-color: pink; 
}

近僞代碼...但一些接近，將工作...

來源

2011-05-11 19:50:01 Tamler

我找到了解決方案，無需使用Java，因爲它是複雜的，甚至是沒有爲我工作。謝謝你，雖然我感謝你的時間。 – user749183 2011-05-12 03:35:41

使用jQuery保持導航按鈕時，相應的頁面加載

回答

相關問題