해당 페이지가로드 될 때 jQuery를 사용하여 탐색 버튼을 상태로 유지합니다.

저는 HTML/CSS 코더로 자바 스크립트에만 끔찍하지만 시도하면 내 웹 사이트가 훨씬 더 효과적이고 잘 보입니다. 내 버튼에 효과를 부여했습니다. 여기에 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>

및

도의 페이지의 주요 콘텐츠 DIV를로드 jQuery를 사용

$(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; 

}); 
}); 
});

메신저, 내가 넣어 머무는 탐색 버튼의 효과를 acheive 원하는 버튼에 영향을 미친다 자바 스크립트입니다 해당 페이지가로드 될 때의 마우스 오버 상태입니다. 그렇게하면 사용자는 자신이 어떤 범주에 있는지 알게되고 표시기가 공간 사용에있어 더 효과적이지만 여전히 효과적인 탐색이됩니다. 읽어 주셔서 대단히 감사합니다. 곧 다시 연락 받기를 바랍니다.

출처

2011-05-11 user749183

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

스타일 : 그것은 복잡한에, 심지어이었다 때문에 자바를 사용하지 않고 해결책을 발견

출처

2011-05-11 19:50:01 Tamler

의사 코드 ...하지만 그 일을 할에 가까운 무언가 근처

#selected { background-color: pink; }

... 나를 위해 잘되지 않았다. 시간 내 주셔서 감사합니다. – user749183

해당 페이지가로드 될 때 jQuery를 사용하여 탐색 버튼을 상태로 유지합니다.

답변

관련 문제