jQueryを使用したタブの改造

質問

jQueryの知識が殆どないので教えてください。

以下のページで公開されているタブを改造して利用したいと考えています。
http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/

▼スクリプト部分
$(document).ready(function() {

//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {

$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content

var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});

});

▼HTML部分
<ul class="tabs">
<li><a href="#tab1">Gallery</a></li>
<li><a href="#tab2">Submit</a></li>
</ul>

<div class="tab_container">
<div id="tab1" class="tab_content">
<!--Content-->
</div>
<div id="tab2" class="tab_content">
<!--Content-->
</div>
</div>

タブをクリックして切り替えるというシンプルなスクリプトなのですが、
1、クリックではなくマウスオーバーでタブを切り替え。
2、アクティブなタブを判別するための要素（？）を「href」ではなく「name」に変更したいと考えています。

自分なりに調べて
.click(function() ～の部分を　.hover(function() に、
attr("href")の部分をattr("name")（＋HTMLのhref部分も変更）に
変更することでほぼ理想通りの動作をするようになりました。

ただ、このコードの動作で少し問題が発生しています

1つはカーソルを素早く滑らせて切り替えを行うと、本来は隠れているべきアクティブなタブ以外のタブ要素が全て表示されることがあるという点。

2つはHTMLのname部分を「name="#tab1"」というHTML的にはおかしな記載をしないといけないという点です。できれば「name="tab1"」という記載の仕方で動作できればと思います。

解決方法があれば教えてくだささい。
よろしくお願いいたします。

回答No.3

fujillin · ベストアンサー

#2です。

実験してみたところ、アニメーションを止めるだけだと透明度がその状態で止まってしまうので、次にfadeInしたときにその透明度までしか表示してくれないみたいですね。
止めたあとに、透明度を戻（完全不透明に）してあげなくてはいけないみたいですが、透明度の指定ってjqueryでどうやるのか不明だったので、適当にfadeTo(0, )で指定してみました。

あと、トリガーをhoverにすると、同じタブに2回触れても表示しなおされてしまうのが変なので、表示中のタブなら表示し直さないように1行追加するほうがよさそう。
修正部分のみ（hover, name対応に修正）

//On hover Event
$("ul.tabs li").hover(function() {
if ($(this).hasClass('active')) return false; //1行追加
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").stop().fadeTo(0, 1).hide(); //変更(追加)
var activeTab = $(this).find("a").attr("name");
$('#' + activeTab).fadeIn();
return false;
});

補足

度々の回答ありがとうございます！

実は質問した後も自分で色々試していたのですが
なんとか自己解決出来ました！

あまり自分自身でもきちんと理解出来ていないのですが
stop(true, true);とすることで
アニメーションを終了の状態（半透明ではない状態）にしてストップできるようです。

＞あと、トリガーをhoverにすると、同じタブに2回触れても表示しなおされてしまうのが変なので、表示中のタブなら表示し直さないように1行追加するほうがよさそう。

上記の件は私もなんとか解決方法はないかと考えていたのです助かりました！

本当にありがとうございました！

回答No.2

fujillin

＞カーソルを素早く滑らせて切り替えを行うと、本来は隠れているべき
＞アクティブなタブ以外のタブ要素が全て表示されることがあるという点
hoverに変えために順にfadeinしているだけで、「本来は隠れているべき」というのは正しくないのではないでしょうか？
アニメーション効果はsetTimeoutやsetIntervalを利用して行なっていると思われるので、意図的に停止しない限り処理が続くために、このようなことが起きていると思われます。

jqueryはよく知らないけれど、たしかアニメーションを止めるメソッドがあったと思うので、他のタブを非表示（hide）する前にアニメーションを停止してあげればよいのではないでしょうか？
http://semooh.jp/jquery/api/effects/stop/_/
（#1様の回答のように、アニメーションを速くしてしまえというのもありかも）

＞できれば「name="tab1"」という記載の仕方で動作できればと思います。
セレクタ指定用に「#」が付いているだけでしょうから、#1様が回答されているように、#を記述で付け加える形にしてあげればよろしいかと。

補足

回答ありがとうございます。

stop()というメソッドの存在は知っていたのですが
いまいちうまく組み込むことができませんでした・・。

回答No.1

yyr446

2つめの質問の回答
別にname="#tab1"でもおかしくないけど、
name="tab1"
<li><a href="hoge" name="tab1">Gallery</a></li>
としてやりたいなら、
- - - - - - - -
var activeTab = $(this).find("a").attr("name");
$("#"+activeTab).fadeIn();
- - - - - - - -
とするだけじゃないかと...

1つめの質問の回答としては
$("#"+activeTab).fadeIn("fast");
としてなるべくエフェクト効果を速くさせるとか、

$(".tab_content").hide();
の方のコールバックで、fadeinの処理を呼ぶようにするとか
============================
var that=$(this);
$(".tab_content").hide("fast",
function(that){
var activeTab = $(that).find("a").attr("href");
$(activeTab).fadeIn("fast");
}
);
==============================

補足

回答ありがとうございます。
質問2については解決しました！確かに大した問題ではないのですが個人的にすごく気になっていたので・・・。

質問1についてエフェクト効果を早くすることで
ある程度改善されるのですが、やはり同じ症状は再現されてしまいます。

＞$(".tab_content").hide();
＞の方のコールバックで、fadeinの処理を呼ぶようにするとか

についてコードを書き換えてみたのですが、なぜか動作しなくなります。
（両方のタブが表示された状態になる）
以下の様に書いているのですがどの点が問題なのでしょうか？
よろしければ回答お願いいたします。

$(document).ready(function() {

//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").hover(function() {

$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide(

var that=$(this);

$(".tab_content").hide("fast",
function(that){
var activeTab = $(that).find("a").attr("href");
$(activeTab).fadeIn("fast");
}
);
);
}
);

});