javascript - jQuery: Tab navigation does not work -


i have 2 div boxes placed on top of 1 css. created jquery function goal of switching through both div boxes. when click on a, box shall show up, when click on b b box shall show (and fade out).

here html:

<div id="tab_navigation">   <ul>     <li id="a_nav"> </li>     <li id="b_nav"> b </li>   </ul> </div>  <div id="tab_container">   <div id="a_box">      <p> box content </p>   </div>   <div id="b_box">     <p> box content </p>   </div>     </div> 

here comes jquery function (i use code in wordpress, therefore instead of "$" use "jquery"):

jquery(document).ready(function() {  // when page loads, b box shall invisible jquery('#b_box').fadeout();  // when click on jquery('#a_nav').click(function() { jquery('#b_box).fadeout(function(){jquery('#a_box').fadein();}); });  // when click on b jquery('#b_nav').click(function() { jquery('#a_box).fadeout(function(){jquery('#b_box').fadein();}); });  }); 

in frontend, when click on #b_nav works fine , box fades out while b box fades in. but: when after click on #a_nav nothing happens , in console following error message:

uncaught typeerror: property '$' of object [object object] not function.

what wrong jquery?


Comments

Popular posts from this blog

user interface - How to replace the Python logo in a Tkinter-based Python GUI app? -

objective c - Greedy NSProgressIndicator Allocation -

how to set an OCR language in Google Drive -