<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>jquery ipop_multi.jsのサンプル</title>
<script type="text/javascript"> $ (function(){ $ (".content:not('.active + .content')").hide(); $(".menu").hover(function(){ $ (this).addClass("hover") }, function(){ $(this).removeClass("hover") }); $ (".menu").click(function(){ $(".menu").removeClass("active"); $ (this).addClass("active"); $(".content:not('.active + .content')").fadeOut(); $ (".active + .content").fadeIn(); }); $(".full_content").css({ "width":"508px", "height":"380px", "position":"relative", "margin":"10px auto", "clear":"both" }); $(".menu").css({ "width":"100px", "height":"25px", "background":"#9C9", "float":"left", "list-style":"none", "padding":"10px 0 0", "margin-left":"2px", "text-align":"center", "display":"block", "cursor":"pointer", "color":"#FFF" }); $(".menu:first-child").css({ "margin-left":"0" }); $(".active, .hover").css({ "background":"#6CC", "font-weight":"bold" }); $(".content").css({ "width":"478px", "height":"320px", "border":"#6CC 5px solid", "background":"#FFF", "top":"32px", "left":"0", "padding":"10px", "position":"absolute" }); }); </script> </head> <body> <div class="full_content"> <div class="menu active">ホーム</div> <div class="content"> お魚くわえたどら猫~おいかけて </div> <div class="menu">画像</div> <div class="content"> はだしでおいかけてく短気な〇〇〇さん </div> <div class="menu">リンク</div> <div class="content"> みんなは笑ってない ~とても視線が痛い </div> <div class="menu">入力</div> <div class="content"> るーるーる 今日は悪い天気!! </div> <div class="menu">テーブル</div> <div class="content"> ここに内容が入ります。 </div> </div> </body> </html><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
タブ押してページを切り替えるものを作っております。
jQueryでcssを書く前でしたらタブをクリックしたら
クリッしたところが色がかわるようになってました。
jQueryでcssを書いたらタブの部分をクリックしてもタグの色は
全く変化せずそのままの色の状態になってしました。
歌詞は正常通り切り替わるので問題ないです(※歌詞は突っ込み禁止)
どなたか大変恐縮ですがご教示よろしくお願いします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/06/21 06:57