2013-04-23 5 views
0

로드시 4 개의 DIV가 있습니다. 3 개의 숨김이 필요합니다 .. 클릭 (탭 링크)에서 해당 탭의 내용을 표시하고 싶습니다. 나머지를 숨 깁니다. 나는 그것의 작동하지 않는 = (Jquery DIV .hide() doesnt work

http://codepen.io/anon/pen/AafIH

<script type='text/javascript' src='http://mimerchant.com/wp-includes/js/jquery/jquery.js'></script> 
<div class="tabnav"> 
    <ul class="fancyNav"> 
     <li id="news"><a href="#creditcard" id="creditcard_link">Credit Card Processing</a> 
     </li> 
     <li id="about"><a href="#atm" id="atm_link">ATM Processing</a> 
     </li> 
     <li id="services"><a href="#giftcard" id="giftcard_link">Gift Card Program</a> 
     </li> 
     <li id="contact"><a href="#check" id="check_link">Check Guarantee</a> 
     </li> 
    </ul> 
</div> 
<div class="tabcontent"> 
    <div id="creditcard"> 
     <div id="textbox"> 
      <h3>Credit Card Processing</h3> 

      <p>Some Text here about what this credit card tab is about</p> 
      <h3>Low Rates</h3> 

      <p>About Low Rates</h3> 
     </div> 
    </div> 
    <div id="atm"> 
     <div id="textbox"> 
      <h3>ATM Processing</h3> 

      <p>Some text here about the ATM services</p> 
      <h3>Another Title</h3> 

      <p>Some text</p> 
     </div> 
    </div> 
    <div id="giftcard"> 
     <div id="textbox"> 
      <h3>Gift Card Program</h3> 

      <p>Something about gift cards</p> 
     </div> 
    </div> 
    <div id="check"> 
     <div id="textbox"> 
      <h3>Check Guarantee</h3> 

      <p>Something About Checks</p> 
     </div> 
    </div> 
</div> 
+0

고유 한 ID 여야합니다. 자바 스크립트는 어 딨지? –

+0

'$는 함수가 아닙니다.'라는 메시지가 표시되어 jQuery가로드되기 전에이 JavaScript가 실행되고 있다고 생각하게되지만, 코덱에 익숙하지 않은 것 같습니다. –

+0

코드에는 아무런 문제가 없습니다. Codepen.io는 단순히 jquery를 예상대로 포함하지 않습니다. JS 구성 화면에서 jquery를 선택하면 원하는 방식으로 작동합니다. –

답변

1

당신이 jQuery를 포함하는 경우 귀하의 코드가 잘 작동합니다. 오른쪽 상단 모서리에서

, 당신은 프레임 워크를 선택할 수있는 아이콘이있다 ..이 포함 시키려면

1

CodePen에서 JS 스 니펫이 HTML에서 jQuery 호출보다 먼저로드됩니다. JS 팬의 상단에있는 톱니 바퀴 아이콘을 클릭하고 jQuery를 라이브러리 목록에 추가하여 CodePen에서이 문제를 해결할 수 있습니다. 실제로 HTML 페이지를 함께 넣어 로컬에서 실행하는 경우 작성중인 스크립트를 가져 오기 전에 jQuery를 가져 오십시오.

나중에이 스크립트를 구현하는 데 문제가 있으면 자바 스크립트 콘솔을 확인하십시오. 이 오류는 대개 jQuery를 가져 오지 못했음을 의미합니다.

Uncaught TypeError: Property '$' of object [object Object] is not a function 
+0

감사합니다. 내 문제에 대한 답변입니다. 내 웹 사이트에서 다른 플러그인이 $ 변수를 가져갔습니다. jQuery와 잘 작동하는 것 같다. – user1986245

0

포함 된 jQuery 인스턴스가 작동하지 않습니다. 대체하시오. here

+0

공백 페이지의 개발자 도구에서 jQuery 사본을 실행하면 $ 또는 jQuery 변수가 설정되지 않습니다. – seniorpreacher