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; } 見た目とタブをクリックして同一ページ内で遷移する動きは希望通りですが、リンクが反映されない点だけが難点です。 （テキスト内のリンクは内容上必須です） 今現在、完全に煮詰まっていますのでヒントだけでもいただけたらと思い投稿しました。 よろしくお願い致します。
↧