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
Post a Comment