Question

My overall aim is to have an tabbed menu with 4 tabs. Within each tab I also want a simple slider to work, where I can add different things in each of these sliders.

Currently I have code which on its own create an tabbed menu, which works fine (currently each tab has static text). I also have a working simple slider.

I thought that if I replace the static text I currently have with the slider divs etc it would give me the final product I want (an tabbed menu with sliders).

However when I add these two things together in one page, it doesn’t work. The tabbed menu just overflows (shows all four tabbed areas rather than just one). I’m a novice at JQuery so any help/explanations would be greatly appreciated. My JQuery code combined is below:

$(document).ready(function(){
$('#homebox_tabs div').hide();
$('#homebox_tabs div:first').show();
$('#homebox_tabs ul li:first').addClass('active');
$('#homebox_tabs ul li a').click(function(){ 
$('#homebox_tabs ul li').removeClass('active');
$(this).parent().addClass('active'); 
var currentTab = $(this).attr('href'); 
$('#homebox_tabs div').hide();
$(currentTab).show();
return false;
});
});

This code is for my tabbed menu.

jQuery.noConflict();
try {
jQuery(document).ready(function($){ 
    $(".right-button").stop(true, true).fadeOut();
    $(".left-button").stop(true, true).fadeOut();
    simpleSlide({
        'set_speed': 1000
    }); 

    $('#slide').hover(

    function () {
            $(".right-button").stop(true, true).fadeIn();
            $(".left-button").stop(true, true).fadeIn();
    }, 
    function () {
            $(".right-button").stop(true, true).fadeOut();
            $(".left-button").stop(true, true).fadeOut();
    }
    );
});
} catch (e) {alert(e);}

This is the code for the simple slider.

Answer 1

why do you use the jQuery.noConflict();? do you use other JavaScript frameworks aside from JQuery? well its not recommended to use the jQuery namespace directly