I am attempting to create a submenu that can update the page content without refreshing by using AJAX tabs to call an external HTML file. While the tabs are functioning properly, I am facing an issue with a JavaScript code within the external HTML file that controls the white navigation arrows and crossfades the content, but is not working as intended. How can I resolve this issue?
The specific page in question is "Nick 101":
www.adigitalgoodie.com/about.htm
This page should function similarly to the front page:
www.adigitalgoodie.com/index.htm
Below is the JavaScript snippet inside the HTML file fetched via AJAX that is causing the problem:
<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>