CSSクラスが正常に動作しない

-1

私のHTMLコードはCSSスタイルを実装していません。CSSファイルの境界線が実装されていません。 Firefoxで両方を試しました& IE。入力してください。CSSクラスが正常に動作しない

見つけてください以下のコード：

HTML

<html> 
    <head> 
     <link href="file://c:/jquery/chapter-1/begin/styles/my_style.css" rel="stylesheet"> 
    </head> 
    <body> 
     <div id="header" class="no_hover"><h1>Header</h1></div> 
     <button type="button" id="btn1">Click to Add</button> 
     <button type="button" id="btn2">Click to Remove</button> 
     <script src="file://c:/jquery/chapter-1/begin/scripts/jquery.js" type="text/javascript"></script> 
     <script src="file://c:/jquery/chapter-1/begin/scripts/test4.js" type="text/javascript"></script> 
    </body> 
</html>

JSファイル

$(document).ready(function() { 
    $("#btn1").click(function(){ 
     $("#header").addClass("hover"); 
     $("#header").removeClass("no_hover"); 
    }); 
    $("#btn2").click(function(){ 
     $("#header").removeClass("hover"); 
     $("#header").addClass("no_hover"); 
    }); 
});

CSSファイル

.hover{ 
    border: solid #f00 3px; 
} 
.no_hover{ 
    border: solid #000 3px; 
}

出典

2012-04-27 user1050619

ブラウザのエラーコンソールは、スタイルシートを収集することができなかったというエラーを印刷していますか？たぶんそうだ。たぶん、 'file：//'の後ろに3番目のスラッシュを追加すると助かります。 – YMMD

本当に2つのスタイルが必要ですか？彼らが同じもの（境界線）を再定義している場合は、CSS .hoverと.no_hoverのシーケンスを逆にして、.no_hoverを置き換えるように.hoverを切り替えるだけでよい（デフォルトの.no_hoverのために逆になる） –

I国境の短縮形を推測する：国境：1px＃000固体; – KBN

ここでは、jQueryの操作やクリーンアップに役立つコードを示します。 DOMを乗算しないでください。その場合は、変数を作成します。また、イベントを連鎖させることもできます。あなたがjQueryを始めたばかりなので、それ以上になったら、これを学ぶように見えます。お役に立てれば。

JSFiddle

$(document).ready(function() { 
    var header = $("#header"); 

    $("#btn1").on("click", function() { 
     header.addClass("hover").removeClass("no_hover");      
    }); 
    $("#btn2").on("click", function() { 
     header.removeClass("hover").addClass("no_hover"); 
    }); 
});

出典

2012-04-27 18:19:08 BuiltInOneDay

問題は、あなたがいるという事実である可能性がありへのリンクファイルをファイルシステムへのパスとして保存する場合は、代わりにCSSとJSファイルをWebサーバーの仮想パスとしてリンクします。

コードは機能します。あなたのjsとCSSファイルをローカライズするときは、うまく動作します：http://jsfiddle.net/pratik136/x4zda/

出典

2012-04-27 17:07:00 bPratik

私はあなたのフィドルで試しましたが、動作しません..ブラウザの問題のようです...私は私のブラウザで何かを有効にする必要があります。 – user1050619

あなたはどのブラウザを使用していますか？私はChrome、FF、IE9で試しました – bPratik

Firefox-11.0で動作し、IE-9では動作しません。 – user1050619

See this JSFiddle

1ページ内のすべてのものが含まれ、次のコードを試してみてください。

<html> 
<head> 
    <style type="text/css"> 
     #header {} 
     .hover{ 
     border: solid #f00 3px; 
     } 
     .no_hover{ 
     border: solid #000 3px; 
     } 
    </style> 
</head> 

<body> 

    <div id="header" class="no_hover"><h1>Header</h1></div> 
    <button type="button" id="btn1">Click to Add</button> 
    <button type="button" id="btn2">Click to Remove</button> 



    <script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
      $(document).ready(function() { 
      $("#btn1").click(function() { 
       $("#header").addClass("hover"); 
       $("#header").removeClass("no_hover"); 
      }); 
      $("#btn2").click(function() { 
       $("#header").removeClass("hover"); 
       $("#header").addClass("no_hover"); 
      }); 
     }); 
    </script> 
</body> 
</html>

出典

2012-04-27 17:11:18 Samwise

CSSクラスが正常に動作しない

答えて

関連する問題