私の全体的な目標は、4 つのタブを持つタブ付きメニューを作成することです。各タブ内で、単純なスライダーも機能させたいと思います。これらのスライダーのそれぞれにさまざまなものを追加できます。
現在、正常に動作するタブ付きメニューを独自に作成するコードがあります (現在、各タブには静的テキストがあります)。また、動作する単純なスライダーもあります。
現在持っている静的テキストをスライダー div などに置き換えると、必要な最終製品 (スライダー付きのタブ付きメニュー) が得られると思いました。
ただし、これら 2 つのものを 1 つのページに追加すると、機能しません。タブ付きメニューがオーバーフローします (1 つだけではなく、4 つのタブ付き領域すべてが表示されます)。私はJQueryの初心者なので、ヘルプ/説明をいただければ幸いです。結合された私の JQuery コードは以下のとおりです。
$(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;
});
});
このコードは、私のタブ付きメニュー用です。
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);}
これは単純なスライダーのコードです。