使用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保持导航按钮时，相应的页面加载

回答

相关问题