liではなくddでタブ切り替えを作りたいのですが

Question

はじめまして141hといいます、
HTMLとCSSの勉強をはじめて2か月になります。
よろしくお願いします。

今回はクリックするとフェードして切り替わるタブを作ろうと思い
コーディングしていたのですが、サイト構成でどうしてリストにするわけにはいかず
1つのddの中に3つaタグを入れるという形でタブを作りたいのですがうまくいきませんでした。

最初にliで作ったコードになります(こちらはうまく切り替わりました)

【HTML】

<ul class="tabMenu"> <li class="tabSelected"><a href="#tabA"></a></li> <li><a href="#tabB"></a></li> <li><a href="#tabC"></a></li> </ul> <div class="tabBoxes"> <div id="tabA"></div> <div id="tabB"></div> <div id="tabC"></div> </div>

【JavaScript】
$(document).ready(function(){
$(".tabMenu li a").on("click",function(){
$(".tabBoxes div").hide();
$($(this).attr("href")),fadeToggle();
return false;
});
});

このようにするとタブの切り替えができるのでですが
これをliではなく下記のようにddでやろうとするとうまく切り替わってくれません。
サイト構成上どうしても一つのddの中にaタグを三ついれるという形にしなくてはいけないのですが
それが原因なのかもわからずどうかお力添えいただけるとありがたいです。
よろしくお願いいたします。

【HTML】

<dl class="tabMenu"> <dt></dt> <dd class="tabSelected"> <a href="#tabA"></a> <a href="#tabB"></a> <a href="#tabC"></a> </dd> </dl> <div class="tabBoxes"> <div id="tabA"></div> <div id="tabB"></div> <div id="tabC"></div> </div>

【JavaScript】
$(document).ready(function(){
$(".tabMenu dd a").on("click",function(){
$(".tabBoxes div").hide();
$($(this).attr("href")),fadeToggle();
return false;
});
});

追記

Answer 1

fadeToggleの前の記号ですが、
ドットがコンマになっているので動かないのではないでしょうか。

$($(this).attr("href")),fadeToggle(); 

下記をコピペして一度お試しください。

$($(this).attr("href")).fadeToggle();

Comments

[141h]

ご返信が遅くなってしまい申し訳ありません。
,を.にしてみたのですが変わらずでした。
コーディングが根本的に間違えてたのかもしれません。
ご回答ありがとうございました。

Answer 2

<dt class="tabMenu"></dt>

これでは「dtタグ以下のddタグ」は存在しないので取得できません。

Comments

[141h]

ありがとうございます。
tabMenuクラスの中にddタグが入っていないのでdlにクラス名を入れる方法でやってみたのですが変わらずでした。ご回答ありがとうございました。

[tkturbo]

「,fadeToggle()」じゃなくて「.fadeToggle()」では？

[141h]

ご返信が遅くなってしまい申し訳ありません。
,を.にしてみたのですが変わらずでした。そもそものコーディングのやり方が間違っていたのかもしれません。再度のご回答ありがとうございました。

Answer 3

$(".tabMenu dd a").on("click"

HTMLを見てみると、tabMenuクラスの中にddタグが入っていません。

HTMLのクラスを付け替えるか、$(".tabSelected a").on("click", ～～ と変更するか

Comments

[141h]

ありがとうございます。
tabMenuクラスの中にddタグが入っていないのでdlにクラス名を入れる方法でやってみたのですが変わらずでした。ご回答ありがとうございました。