Q&A
ありがとうございます参考にさせてもらいます。
あとjqueryも今後の課題にしてみます
現在サイトのデザインを書いています
それでさっき書いたんですが、
lang
1<style> 2html,body { 3 margin: 0; 4 padding: 0; 5 border: 0; 6} 7body { 8 background-color: rgba(0,0,0,1.00); 9} 10* { 11 font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; 12 color: rgba(255,255,255,1.00); 13 text-decoration: none; 14} 15#main_surround { 16 width: 100%; 17 height: auto; 18 box-shadow: 2px 2px 8px rgba(255,255,255,0.80); 19} 20#left_surround_box { 21 width: 380px; 22 height: auto; 23 background-color: transparent; 24 margin: 0; 25 padding: 0; 26 float: left; 27} 28.left_surround_title { 29 text-align: center; 30 color: rgba(20,0,255,1.00); 31 background-color: rgba(200,255,255,1.00); 32 border: solid 1px rgba(10,0,255,1.00); 33 text-shadow: 1px 1px 5px rgba(100,100,255,0.50); 34 box-shadow: 4px 4px 2px rgba(200,200,255,0.50) inset; 35 padding: 6px 0px; 36} 37#left_surround_box>ul { 38 list-style: none; 39 text-align: center; 40 margin: 0; 41 padding: 0; 42} 43#left_surround_box>ul>li>a { 44 width: 100%; 45 height: 100%; 46 padding: 6px 0px; 47 display: block; 48} 49#left_surround_box>ul>li,#left_surround_box>ul>li>a { 50 transition: 0.3s ease all; 51} 52#left_surround_box>ul>li:hover,#left_surround_box>ul>li>a:hover { 53 background-color: rgba(50,100,255,0.80); 54 box-shadow: 2px 2px 1px rgba(20,0,255,0.80); 55} 56</style> 57</head> 58<body> 59<div id="main_surround"> 60 <div id="left_surround_box"> 61 <div class="left_surround_title"> 62 メニュー 63 </div> 64 <ul> 65 <li><a href="">Top</a></li> 66 <li><a href="">概要</a></li> 67 <li><a href="">更新状況</a></li> 68 <li><a href="">製作者</a></li> 69 </ul> 70 </div> 71</div>
もし概要のページに飛んだら概要の<li></li>で囲んだ場所だけ色が変わる（更新状況、製作者共に同じ)ようにしたいです
cssで概要ページのときだけ色を変更するようにあらかじめしておけばいいのでしょうがすごくセンスがない気がします。なのでjqueryを使ってそのような処理をしたいんですがどう書いたらいいでしょうか
お願いします。
回答2件
0
他のサイトの引用で申し訳ないですが、同じことをされてる方がいらっしゃったので紹介します。
jQueryでカレントページの要素にclass="current"を付加する方法
http://blog.creamu.com/mt/2012/08/classcurrent.html
投稿2015/03/04 07:32
総合スコア58
0
<ul>
<li id="top"><a href="">Top</a></li>
<li id="summary"><a href="">概要</a></li>
<li id="update_status"><a href="">更新状況</a></li>
<li id="author"><a href="">製作者</a></li>
</ul>
こんな感じでliにID（またはclass）指定しておいて、
.left_surround_box li.visit {
background-color: #efefef;
}
こんな感じのcssを追加して、
各ページで
<script> (function(){ $(document).ready(function(){ $("#summary").addClass("visit"); }); })(jQuery); </script>と、するわけです。
投稿2015/03/04 11:48
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/03/04 12:03