2013-09-29 4 views
0

jQuery에서 이벤트를 설정하는 navbar에 링크가 있습니다. 몸에이러한 jQuery 객체가 작동하지 않는 이유는 무엇입니까?

HTML 코드 :

<body> 
    <div id="bodydiv"> 
     <div id="header"> 
      <div id="navbar"> 
       <ul> 
       <li id="#linkabout"><span>About</span></li> 
       <li id="#linkservices"><span>Services</span></li> 
       <li id="#linkportfolio"><span>Portfolio</span></li> 
       <li id="#linknews"><span>News</span></li> 
       </ul> 
      </div> 
     </div> 
     <div id="middleAbout"> 
     </div> 
     <div id="middleServices"> 
     </div> 
     <div id="middlePortfolio"> 
     </div> 
     <div id="middleNews"> 
     </div> 

     <div id="footer"> 
     </div> 
    </div> 
</body> 

jQuery를 코드 :

$(document).ready(function() { 

    $('span').hover(function() { 
     $(this).stop().fadeTo(100, 0.75); 
    }, function() { 
     $(this).stop().fadeTo(100, 1); 
    }); 

    $('#linkServices').click(function(){ 
     $('#middleAbout').hide('slide', {direction: 'left'}, 1000); 
     $('#middleServices').show('slide', {direction: 'right'}, 1000); 
    }); 

    $('#linkPortfolio').click(function(){ 
     $('#middleServices').hide('slide', {direction: 'left'}, 1000); 
     $('#middlePortfolio').show('slide', {direction: 'right'}, 1000); 
    }); 

    $('#linkNews').hover(function(){ 
     $('#middlePortfolio').hide('slide', {direction: 'left'}, 1000); 
     $('#middleNews').show('slide', {direction: 'right'}, 1000); 
    }); 

    $('#linkAbout').click(function(){ 
     $('#middleNews').hide('slide', {direction: 'left'}, 1000); 
     $('#middleAbout').show('slide', {direction: 'right'}, 1000); 
    }); 
}); 

그리고 마지막으로, 여기에 웹 사이트에 대한 링크입니다하지 말에 내가 할 수있는을 설명합니다 : http://www.darcain.com

div에 대한 navbar 링크의 각 항목을 적절한 div를 클릭했을 때 정상적으로 슬라이드시킬 수 있습니다. 지금은 단지 예쁜 색입니다.

div 개체를 클릭해야하는 jQuery 개체를 변경할 때 올바르게 작동하지만 navbar 링크를 사용하면 전혀 작동하지 않습니다.

나는 의미가 있기를 바랍니다.

+0

당신은 id에'# '기호를 포함하지 않습니다. 그것은'id = "linkServices"'등이어야합니다. – kennypu

+0

예, 그 것들은 줄을서야합니다. "linkServices"를 치려고하지만 요소 ID는 "linkservices"입니다. – Bosworth99

답변

3

'id'매개 변수 값에서 '#'기호를 사용하십시오. JQuery가 제공 한 선행 이름과 동일한 값의 'ID'매개 변수가있는 dom 요소를 찾고 있음을 알기 위해서는 '#'기호가 필요하지만 '#'을 id 매개 변수 값에 추가하지 마십시오. 이렇게 보일 것입니다.

 <li id="linkabout"><span>About</span></li> 
     <li id="linkservices"><span>Services</span></li> 
     <li id="linkportfolio"><span>Portfolio</span></li> 
     <li id="linknews"><span>News</span></li> 
+0

물론 이죠. 나는 바보처럼 느껴진다. 감사합니다 :) jQuery에 비트를 추가하여 다른 div가 모두 숨겨져 있는지 확인해야했습니다. –

+0

도움이 되니 기쁩니다. 행복한 코딩. –

1

li 태그의 ID 속성에 "#"을 포함하지 마십시오. 그리고 대소 문자를 구별

  <ul> 
      <li id="linkAbout"><span>About</span></li> 
      <li id="linkServices"><span>Services</span></li> 
      <li id="linkPortfolio"><span>Portfolio</span></li> 
      <li id="linkNews"><span>News</span></li> 
      </ul> 
관련 문제