クリックした文字の背景色変更、静的HTMLの切替

説明が難しいので、楽天トラベルさんのサイトがまさにやりたいことそのままなので

http://travel.rakuten.co.jp/onsen/tochigi/OK0024 …

ここの[並び替え]の、「おすすめ順」「料金が安い順」…って、クリックした箇所は
押下できないようにリンクが消えて、背景に色がつきます。
で、他の箇所をクリックしたら、今度はそっちに色がついて、前に押してた箇所の
リンクは復活します。
その際、おそらくは静的なHTMLであろう、表示項目を切り替えています。

こういうことをやりたいんですが、JavaScriptとか使ってるわけでもなさそうだし、
<a href…>じゃなくてSPAN使ってるし、やり方がよくわからず困っています。
ご教授願えないでしょうか。

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2011/06/19 15:05

自分で調べるのがベストです。

firefox+fireBugで該当する要素を見つけてクリックすると、javascriptで、要素が書き換えられているのが一目瞭然です。
初期値
<span id="osusume" class="selected">おすすめ順</span>
　　　　　　　　　　^^^^^^^^^^^^^^^
料金が安い順をクリックすると
<span id="osusume" class="sortItem">おすすめ順</span>
　　　　　　　　　　　^^^^^^^^^^^^^^
に変化しますから、javascriptでHTMLを書き換えていますね。添付図

HTMLが変化するから、適用されるスタイルシートが変化する。
初期値
div#mainArea div#hotelArea div.hotelList dl.hotelSort dd ul li span.selected {
background-color: #E6752B;
color: #FFFFFF;
font-weight: normal;
margin: 0;
padding: 1px 3px;
}
料金が安い順
div#mainArea div#hotelArea div.hotelList dl.hotelSort dd ul li span.sortItem {
color: #401D07;
cursor: pointer;
text-decoration: underline;
}

この回答へのお礼

ありがとうございます！JSだったのですね。
謎が解けました。

JSを使わないで出来るなら、マネをしようと思っていたのですが、
JSでしたらSPANでonclikでJS使うなりで対応してみます。
ありがとうございました。

お礼日時：2011/06/19 21:27

No.2 回答者： ORUKA1951 回答日時： 2011/06/19 15:08

画像が添付できなかった??