※ ChatGPTを利用し、要約された質問です（原文：html5+jqueryでリンクが反映されない）
html5+jqueryでリンクが反映されない
このQ&Aのポイント
html5+css3でスマートフォン向けサイトをコーディングしています。タブナビゲーションを作りたくて、ちょうど良いサンプルを見つけて使わせていただきました。表示は思った通りに出来たのですが、テキスト部分にリンクを付けてもソース上では何も反応しない問題が発生しています。
PCで動作確認しています。使用しているjQueryのバージョンは1.8.2です。
テキスト内にリンクを反映させるための設定に問題があるため、リンクが反映されない状況になっています。現在、解決策についてのヒントを求めています。
html5+css3でスマートフォン向けサイトをコーディングしています。
タブナビゲーションを作りたくて、ちょうど良いサンプルを見つけて使わせていただきました。
http://designdrill.jp/wordpress/?p=5082
表示は思った通りに出来たのですが、テキスト部分にリンクを付けてもソース上では
<div id="txt_1"><a href="http://www.google.co.jp/">googleの説明文</a></div>
このように問題無く表記されているのですが、クリックしても何も反応しません。
動作確認はPCでしています。
ソースは以下の通りです。
※オリジナルの方はjquery-1.7.min.jsでしたが、1.8.2使用です。
html部分-------------------
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#textArea>div").hide();
var select_id = 1;
$("#btn_" + select_id).addClass("selected");
$("#txt_" + select_id).show();
$('#tab').on("click touchstart", "li:not(.selected)",function() {
var click_id = this.id.split("_")[1];
var myColor = $("#btn_" + click_id).css("background-color");
$("#textArea").css("background-color", myColor);
//alert(myColor)
$("#btn_" + select_id).removeClass("selected");
$("#txt_" + select_id).hide();
$("#btn_" + click_id).addClass("selected");
$("#txt_" + click_id).show();
select_id = click_id;
})
})
</script>
</head>
<body>
<section id="tab">
<ul>
<li id="btn_1" class="yellow">google</li>
<li id="btn_2" class="pink">yahoo</li>
<li id="btn_3" class="blue">apple</li>
</ul>
<div id="textArea">
<div id="txt_1"><a href="http://www.google.co.jp/">googleの説明文</a></div>
<div id="txt_2">yahooの説明文</div>
<div id="txt_3">appleの説明文</div>
</div>
</section>
css部分-------------------
#tab {
-webkit-tap-highlight-color: rgba(0,0,0,0); /* デフォルトのタップハイライトを停止 */
}
#tab ul {
margin: 10px;
}
#tab ul li {
float: left;
padding:5px 15px 5px 15px;
border-top: 1px #ddd solid;
border-left: 1px #ddd solid;
border-right: 1px #ddd solid;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
color: #999;
height:15px;
line-height:15px;
margin: 5px 0px 0px 5px;
}
#tab ul li.selected {
color: #000;
height:20px;
line-height:20px;
margin: 0px 0px 0px 5px;
}
#textArea{
position:relative;
top:-1px;
z-index:-1;
clear:left;
background-color:#ffd;
margin:0px 10px 10px 10px;
padding:10px;
height:100px;
border: 1px #ddd solid;
-webkit-border-radius: 5px;
}
.yellow{
background-color:#ffd;
}
.pink{
background-color:#fdf;
}
.blue{
background-color:#dff;
}
見た目とタブをクリックして同一ページ内で遷移する動きは希望通りですが、リンクが反映されない点だけが難点です。
（テキスト内のリンクは内容上必須です）
今現在、完全に煮詰まっていますのでヒントだけでもいただけたらと思い投稿しました。
よろしくお願い致します。
お礼
だいぶ前にscriptのチェックで使ったきりだったので、Firebugの見方自体が良く解っていなかったようです。 アドバイスに従ってFirebugでもう一度見たら、すぐに解りました。 作者様のサイトにタブ部分とコンテンツ部分のborderが重なってしまう為、きれいに繋がって表示されるようにz-index:-1;で表示順を指定したとありました。 「へー、ちゃんと隠れてるね。」ぐらいの感覚で読み飛ばしていたのですが、この影響だったのですね。 border指定とz-index: -1;を外したら、上手く動作するようになりました。 Firebugの利用方法も少し理解できたので、今後に役立てたいと思います。 的確なヒントをいただき有難うございました。 非常に助かりました。