DreamweaverCS4のSpryメニューバーでの現在位置表示

質問

DreamweaverCS4のSpryメニューバーでの現在位置表示
お世話になります。
DreamweaverCS4のSpryメニューバーの質問です。
Spryメニューでメニューを選択しリンク先ページをオープンするのですが、そのリンク先ページでリンク先のSpryメニューの背景色を変更（現在位置メニューを表したい）はどのようにしたらよいのでしょうか。
ご教授お願いします。

回答No.2

kuzumiHK · ベストアンサー

調べてみたところ、a.thisよりも具体的に明示している下記の指定があり、
そちらが効いているからでした。

ul.MenuBarHorizontal a{
background:#eee;
}

これを解決するには、
同じ以上に具体的に明示して指定する、

ul.MenuBarHorizontal a.this{
background:#f00;
}

もしくは、a.thisは何よりも優先ということで!importantをつけるかです。

a.this{
background:#f00 !important;
}

お礼

お世話になります。
kuzumiHKさん　再度の回答ありがとうございます。

回答内容にある具体的な明示"ul.MenuBarHorizontal a.this"を行なったところ背景色が有効になりました。どうもありがとうございました。
もう少し自分のレベルアップをしなければいけないと痛感しました。

回答No.1

kuzumiHK

Spryメニューバーのカスタマイズがどこまでできるのか、あまりよくわかっていませんが、
現在URLとリンクが一致したら、class="this"をaタグに追加するようにしてみてはいかがでしょうか。

▼body内に書かれているSpryメニューバーのidがMenuBar1のjavascript
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget
～以下、省略

このscriptタグ内に以下を追加する

var menubar = document.getElementById("MenuBar1"); // Spryメニューバーのidを追加
var a = menubar.getElementsByTagName("a"); // Spryメニューバーのaタグの中身をまとめて取得
for (var i = 0; i < a.length ; i++){ // Spryメニューバーのaタグの数だけループ
var url = location.href; // 現在のURLを取得
url = url.replace(/#.*?$/g, ""); // 現在のURLにアンカーがあったら削除
if(a[i].href == url){ // 現在のURLとaタグのリンク先が同じ場所だったら
if(document.all){
a[i].setAttribute("className","this"); // IE
}
else{
a[i].setAttribute("class","this"); // IE以外
}
}
}
//-->
</script>

▼head内かcssファイルに.this用のスタイルを追加
<style type="text/css">
a.this{
border:10px solid #f00;
}

a.this:hover{
border:10px solid #039;
}
</style>

補足

お世話になります。
kuzumiHKさん　回答ありがとうございます。
回答内容にあるスクリプトを組み込みテストしたところ、this用のスタイルが適用されました。ありがとうございました。
追加になりますが、現在位置メニューの背景色を変えようとしてa.thisスタイルにbackground
プロパティ（例えば、赤）を指定したのですが、背景色は変わりませんでした。
背景色を変える場合は、どのようにすればよいのでしょうか。
ご教授お願いします。