I trying to make a submenu with the ability to change the page content without the refreshing, so I used AJAX tabs to call an external htm. The tabs are working, but I have a JavaScript inside my external htm which makes the white navigation arrows work, and also crossfades the content, which is not working. How do I fix this?
I am talking about this particular page - "Nick 101"
www.adigitalgoodie.com/about.htm
It is supposed to work like it does on the frontpage
www.adigitalgoodie.com/index.htm
This is the JavaScript inside the htm, fetched via AJAX, which isn't working:
<script type="text/javascript">
$('.contentnavright').click(function(){
$('.contenttext1').fadeOut();
$('.contenttext2').fadeIn();
$('.contentnavleft').css('opacity', '1');
$('.contentnavleft').css('-moz-opacity', '1');
$('.contentnavleft').css('filter', 'alpha(opacity=100)');
$('.contentnavright').css('opacity', '0');
$('.contentnavright').css('-moz-opacity', '0');
$('.contentnavright').css('filter', 'alpha(opacity=0)')
});
$('.contentnavleft').click(function(){
$('.contenttext1').fadeIn();
$('.contenttext2').fadeOut();
$('.contentnavleft').css('opacity', '0');
$('.contentnavleft').css('-moz-opacity', '0');
$('.contentnavleft').css('filter', 'alpha(opacity=0)');
$('.contentnavright').css('opacity', '1');
$('.contentnavright').css('-moz-opacity', '1');
$('.contentnavright').css('filter', 'alpha(opacity=100)')
});
</script>
It seems that script is same for all pages. As such you can just put it in the main html, and use the live/on jquery approach:
$("#container").on("click", ".contentnavright", function(){whatever});
将该代码放入函数中,并在您的ajax请求完成后调用该函数
$('.contentnavleft').click(myFunc);
function myFunc(){
$('.contenttext1').fadeIn();
$('.contenttext2').fadeOut();
$('.contentnavleft').css('opacity', '0');
$('.contentnavleft').css('-moz-opacity', '0');
$('.contentnavleft').css('filter', 'alpha(opacity=0)');
$('.contentnavright').css('opacity', '1');
$('.contentnavright').css('-moz-opacity', '1');
$('.contentnavright').css('filter', 'alpha(opacity=100)')
}
then, when you finished your ajax request, you put $('.contentnavleft').click(myFunc);
to bind again the function to the .contentnavleft element.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.