-1

私のHTMLコードはCSSスタイルを実装していません。CSSファイルの境界線は実装されていません。FirefoxとIEの両方で試しました。入力を入力してください。

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

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;
}
4

3 に答える 3

4

問題はおそらく、ファイル システムへのパスとしてファイルにリンクしているという事実にあります...代わりに、Web サーバーからの仮想パスとしてCSSおよびファイルにリンクしたいと考えています。JS

あなたのコードは機能します。このフィドルを参照してください：http://jsfiddle.net/pratik136/x4zda/

于 2012-04-27T17:07:00.177 に答える
1

jQueryを支援したり、クリーンアップしたりするためのコードを次に示します。DOMに何度も飛び込まないでください。次に、変数を作成します。また、イベントを連鎖させることもできます。jQueryを始めたばかりのように見えるので、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-27T18:19:08.550 に答える
0

ファイルとファイルをローカライズするjsと正常に動作しCSSます。

この 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-27T17:11:18.957 に答える