ここでの最初の投稿なので、我慢してください!
jquery ui tabs プラグインを使用してギャラリーを作成しています。左右に小さな矢印をスライドさせて、どのギャラリーが表示されているかをユーザーに表示したいと考えています。
私が使用しているコードはこれです:
<script>
if ($('#wedding-btn').hasClass('ui-state-active')) {
$('.nav-selector').css('left', '5px');
} else if ($('#portrait-btn').hasClass('ui-state-active')) {
$('.nav-selector').css('left', '125px');
} else if ($('#landscape-btn').hasClass('ui-state-active')) {
$('.nav-selector').css('left', '255px');
} else if ($('#blackandwhite-btn').hasClass('ui-state-active')) {
$('.nav-selector').css('left', '410px');
}
</script>
ここに私が話していることを示すリンクがあります: http://www.maxhenchman.co.uk/oh/latest2/
ここで他の記事を見てきましたが、上記のコードはうまくいくようです...しかし、私はjqueryにかなり慣れていないので、おそらく間違っています。
どんな助けでも素晴らしいでしょう!
ありがとう、
マックス
ジョニーの編集:
<script type="text/javascript">
$(document).ready(function() {
$( "#tabs" ).tabs({
show: { effect: "fade", duration: 400 },
hide: { effect: "fade", duration: 800 }
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#wedding-btn').click(function(){
if($(this).hasClass('ui-state-active'))
$('.nav-selector').css('left', '5px');
});
$('#portrait-btn').click(function(){
if($(this).hasClass('ui-state-active'))
$('.nav-selector').css('left', '125px');
});
$('#landscape-btn').click(function(){
if($(this).hasClass('ui-state-active'))
$('.nav-selector').css('left', '255px');
});
$('#blackandwhite-btn').click(function(){
if($(this).hasClass('ui-state-active'))
$('.nav-selector').css('left', '410px');
});
});
</script>