1

グローバルcssファイルに以下のコードが含まれています

#menu_left
 {
  color: #004080;
  width: 225px;
  margin: 0px;
  border-style: solid solid none solid;
  border-color: #ffffff;
  border-size: 1px;
  border-width: 1px;
 }

#menu_left li a
{
 color: #222222;
 height: 26px;
 voice-family: inherit;
 text-decoration: none;
 border-bottom: solid 1px #ffffff;
 background-color:#D3D7D9;
 font-size:12px;
 font-family:tahoma;
}

#menu_left li a:link, #menu_left li a:visited
{
 color: #222222;
 display: block;
 padding: 8px 0 0 10px;
 border-bottom: solid 1px #ffffff;
 background-color:#D3D7D9;
 font-size:12px;
 font-family:tahoma;
}
#menu_left li a:hover
{
 color: #222222;
 padding: 8px 0 0 10px;
 border-bottom: solid 1px #ffffff;
 font-weight:normal;
 background-color:#B9C4CA;
 font-size:12px;
 font-family:tahoma;
}

今のところ、#menuleft id を div に割り当てました。この div には、li の (リスト タグ) と、各 li タグに 1 つのアンカー タグが含まれています。私のすべてのliはリストとして左側のパネルに表示されます.liを選択すると、いくつかのcssスタイルが表示され、その他には上記のcssが表示されます。

これらの css の変更を選択と選択解除で切り替える js 関数を 1 つ作成しました。

しかし、以下のようにするとホバーCSSが適用されません...

function setSelected(selID)//selId is ID for anchor tag in selected li item
{
 //contains all list of anchor tag id's
  var anchorID=['usersAnchor','securityAnchor','passPolAnchor','activeSessAnchor'];
  for(i=0;i<anchorID.length;i++)
   {
     if(selID!=anchorID[i])
     {
        var div = document.getElementById(anchorID[i]);
        div.style.fontWeight = 'bold';
        div.setAttribute('style','color: #222222;height: 26px;voice-family: inherit;text-decoration: none;border-bottom: solid 1px #ffffff;background-color:#D3D7D9;font-size:12px;font-family:tahoma;');
        }
     else

     {
         var div = document.getElementById(selID);
         div.style.fontWeight = 'bold';
         div.setAttribute('style','color: #FFFFFF; display: block;  padding: 8px 0 0 10px; border-bottom: solid 1px #ffffff; background-color:#718296;  font-size:12px;  font-family:tahoma;');
        }
   }

選択を切り替えている間、選択ホバーと通常で機能するように、すべてのcssプロパティを取得するにはどうすればよいですか?

よろしく、カメッシュ

4

4 に答える 4

1

jQueryを使って仕事をもっと簡単に！

これを使用する代わりに：

div.setAttribute('style','color: #FFFFFF; display: block;  padding: 8px 0 0 10px; border-bottom: solid 1px #ffffff; background-color:#718296;  font-size:12px;  font-family:tahoma;');

jQuery を使用すると、簡単でクロス ブラウザ互換になります。この方法を使用して同じことを行うことができます：

$('div').attr('style','color: #FFFFFF; display: block;  padding: 8px 0 0 10px; border-bottom: solid 1px #ffffff; background-color:#718296;  font-size:12px;  font-family:tahoma;');

または

$('div').css({
    'color': '#FFFFFF', 
    'display': 'block', 
    'padding': '8px 0 0 10px', 
    'border-bottom': 'solid 1px #ffffff', 
    'background-color': '#718296', 
    'font-size': '12px', 
    'font-family': 'tahoma'
});

jQueryの.css属性が使える！:)

于 2012-07-25T10:07:41.157 に答える
1

setSelected設定した直後に太字のスタイルを上書きしています。そうは言っても、CSS をより快適に扱うことができます。

css をノード レベルで正しく設定する代わりに、css が発明された目的を使用してみませんか?

クラスを設定できselected、コードでトグルするだけですclassName

.selected {
   color: #222222;
   height: 26px;
   voice-family: inherit;
   text-decoration: none;
   border-bottom: solid 1px #ffffff;
   background-color:#D3D7D9;
   font-size:12px;
   font-family:tahoma;
}

そして、単純な JS 関数がクラス スワッピングを処理します。

function setSelected(selID) {
   var anchorIDs = {
       'usersAnchor': true
       'securityAnchor': true
       'passPolAnchor': true
       'activeSessAnchor': true
   };
   var div = document.getElementById(selID),
   className = div.className;

   if (anchorIDs[selID] === true) {
       div.className = className.replace(/\s+(selected)/, " selected");
   } else {
       div.className = className.replace(/\s+(selected)/, "");
   }
}
于 2012-07-25T11:42:53.920 に答える
0

jQuery API からの使用をお勧めします。.css

于 2012-07-25T10:01:03.823 に答える
0

このフィドルを見てください。これはあなたが行っている効果ですか？.css()jQuery を使用して Javascript を簡単にしますが、jQuery のメソッドを使用する代わりに、CSS クラスを切り替えることによってスタイルを切り替えます。これには 2 つの理由があります。1 つ目は、コードを目的ごとに分ける必要があることです。HTML はコンテンツ、CSS はスタイル、Javascript はロジックのみに使用する必要があります (可能であれば、コンテンツやスタイルを Javascript に含めないでください)。2 つ目の理由は、Javascript を使用してクラスを切り替える方が、スタイルを切り替えるよりもはるかに簡単だからです。

于 2012-07-25T15:45:23.413 に答える