マウスオーバー時のCSSスタイルの上書きを複数の要素に対して行わせる処理をjsでやりたいと思っています。
例えば、idがa~jまである8個のリストのうち、b,c,dがグループ1、f,gがグループ2とします。
グループ1のどれかがマウスオーバーしたときにグループ1のほかの2つにclassをつけ、マウスアウトしたらもとに戻す。グループ2でも同様、のような場合のスマートな書き方はないでしょうか?
元のhtml
<ul>
<li id="a">text</li>
<li id="b">text</li>
<li id="c">text</li>
<li id="d">text</li>
<li id="e">text</li>
<li id="f">text</li>
<li id="g">text</li>
<li id="h">text</li>
</ul>
グループ1のcにマウスがあった場合はこうなってほしい
<ul>
<li id="a">text</li>
<li id="b" class="on">text</li>
<li id="c" class="on">text</li>
<li id="d" class="on">text</li>
<li id="e">text</li>
<li id="f">text</li>
<li id="g">text</li>
<li id="h">text</li>
</ul>
グループ2のgにマウスがあった場合はこうなってほしい
<ul>
<li id="a">text</li>
<li id="b">text</li>
<li id="c">text</li>
<li id="d">text</li>
<li id="e">text</li>
<li id="f" class="on">text</li>
<li id="g" class="on">text</li>
<li id="h">text</li>
</ul>
スタイル自体は、cssファイルにもとから入れておくものとする。
マウスアウトしたときはどの場合は元のhtmlの状態にもどる。
このようなイメージです。
idが見つからなかった場合のreturn処理もきちんと入れたいです。
ひとつひとつに書いていくことまでならできたのですが、もう少しシンプルにできたらいいなと思っています。宜しくお願いします。
No.1ベストアンサー
- 回答日時:
グループ毎にNoでも付けておいて、<li>にイベントを設定すれば良いのでは?
以下、ご参考まで。
<html>
<head>
<style>
li { width:100; }
.on { color:red; }
</style>
<script>
var group = ['b,c,d','f,g'];
window.onload = function(){
for (var i=0;i<group.length; i++){
var elm = group[i].split(',');
for (var j=0; j<elm.length; j++){
document.getElementById(elm[j]).onmouseover = (function(n_,f_){return function(){hoge(n_,f_);};})(i,'on');
document.getElementById(elm[j]).onmouseout = (function(n_,f_){return function(){hoge(n_,f_);};})(i,'');
}
}
}
function hoge(g,f){
var elm = group[g].split(',');
for (var i=0; i<elm.length; i++){
document.getElementById(elm[i]).className = f;
}
}
</script>
</head>
<body>
<ul>
<li id="a">text-a</li>
<li id="b">text-b</li>
<li id="c">text-c</li>
<li id="d">text-d</li>
<li id="e">text-e</li>
<li id="f">text-f</li>
<li id="g">text-g</li>
<li id="h">text-h</li>
</ul>
</body>
この回答への補足
fujillinさん、ありがとうございます。とてもわかりやすいです。
あと、今回は新しくクラス名を付けるという処理をしたのですが、以下のようにid名を変えるということは出来るでしょうか?
<li id="b">text-b</li>にマウスがフォーカスされた場合
→
<li id="b_on">text-b</li>
<li id="c_on">text-c</li>
<li id="d_on">text-d</li>
もしくは、<li id="b_on">text-b</li> の中にある<a>に、新規のクラスを振る
<li id="b"><a href="#">text-b</a></li>にマウスがフォーカスされた場合
<li id="b"><a href="#" class="on">text-b</a></li>
<li id="c"><a href="#" class="on">text-c</a></li>
<li id="d"><a href="#" class="on">text-d</a></li>
たびたびですみませんが、ご教授いただけるとうれしいです。
よろしくお願いします。
No.3
- 回答日時:
No.1です。
idは個別の識別子ということになっているので、書き換えるとDOMでのアクセスに支障がきたすと思うけど?
上記の理由で、idの書き換えはできないブラウザもあると思います。新規の作成したオブジェクトならid設定もできると思うけど。(このあたりは未検証)
><li id="b"><a href="#">text-b</a></li>にマウスがフォーカスされた場合~~
最初に、イベントを<a>タグに設定しておくか、あるいは処理ルーチン側で<li>のクラス設定をするかわりに、子要素の<a>タグにクラス設定をすればいいだけです。
実際のタグ構成が不明ですが、firstChildに決めうちでよいのなら
document.getElementById(elm[i]).firstChild.className = f;
みたいな感じ。
fujillinさん
お返事が遅くなってすみません。
ありがとうございます、子要素への設定でうまくできました!
とても勉強になりました、ありがとうございます!
No.2
- 回答日時:
これで良いのか、毎回微妙~。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>GroupCSSChanger?</title>
<style type="text/css">
.on0 { color:red; }
.on1 { color:blue; }
.off { color:green; }
</style>
<ul id="onakasuita">
<li id="a">text</li>
<li id="b">text</li>
<li id="c">text</li>
<li id="d">text</li>
<li id="e">text</li>
<li id="f">text</li>
<li id="h">text</li>
<li id="g">text</li>
</ul>
<script type="text/javascript">
//全角スペースは半角に変換のこと
//@cc_on
(function () {
new GCSSC('onakasuita', 'off', 'on0', 'b', 'c', 'd');
new GCSSC('onakasuita', 'off', 'on1', 'f', 'g');
function GCSSC (group, css0, css1) {
var count, e, p;
this.css0 = css0;
this.css1 = css1;
this.list = [];
this.group = document.getElementById(group);
count = 3;
while (e = arguments[count++]) {
document.getElementById(e).className = css0;
this.list.push(e);
}
this.group./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'mouseover',
(function (cb_) { return function (evt) {
var i, j, m, eid = (evt.target || evt.srcElement).id;
for (i = 0, m = cb_.list.length; i < m; i++) {
if (eid == cb_.list[i]) {
for (j = 0; j < m; j++)
document.getElementById(cb_.list[j]).className = cb_.css1;
break;
}
}
}; })(this),
false);
this.group./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'mouseout',
(function (cb_) { return function () {
var i = 0, m = cb_.list.length;
for (; i < m; document.getElementById(cb_.list[i++]).className = cb_.css0);
}; })(this),
false);
}
})();
</script>
_pipiさん
返信が遅くなってすみません、回答ありがとうございました。
違う方法でやりましたが、勉強させていただきました!
どうもありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- その他(IT・Webサービス) html cssについて 3 2023/05/13 12:48
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptでフォーカスを当て...
-
【jQuery】hoverしたn秒後にイ...
-
jqueryのsortableで一部ソート...
-
メニューのリンクをクリックし...
-
同一ページ内で、任意の文字列...
-
「jQuery」アコーディオンメニ...
-
大量のチェックボックス状態取...
-
SleniumBasicでコンパイルエラ...
-
javascriptでEnterキーをtabキ...
-
DOM の 要素の数え方について
-
クリックで表示、非表示するメ...
-
javascriptテキストBOX色を元に...
-
フォームに入力された値により...
-
MAX関数を使ってからLEFT JOIN...
-
1枚の画像をクリックすると複数...
-
自働生成される<div>タグに連番...
-
指定したパスが現URLに含まれて...
-
jQuery bxSlider 画像に変更
-
removeAttribute()メソッドで削...
-
CSS <div>の入れ子が反映さ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
同一ページ内で、任意の文字列...
-
タブ切り替えの初期表示について
-
ネストされたチェックボックス...
-
JQueryタブのアクティブ アン...
-
Jquery の slide.toggle で要素...
-
ホームページビルダー17のフ...
-
【javascript で動的に a タグ...
-
javascriptで正規表現の検索が...
-
JavascriptのDOMについて
-
javascript テキストエリアを1...
-
for(var i=0;...) の i の値を...
-
クリックで表示、非表示するメ...
-
jQueryで電卓を作っているのですが
-
js ライブラリ iscrollの利用に...
-
jquery ドロップダウンメニュー...
-
プルダウンのメニュー表示について
-
jQueryのhide,showで中の要素が...
-
gridstack.jsについて教えてく...
-
【HP制作】メールフォームの設...
おすすめ情報
