CSS類不按預期工作

-1

我的HTML代碼沒有實現CSS樣式.. CSS文件中的邊框沒有實現。我試過FirefoxIE。請提供您的輸入。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：//'後面添加第三個斜槓。 – YMMD 2012-04-27 17:03:51

你真的需要兩種風格嗎？如果他們正在重新定義相同的事物（邊界），則只需要顛倒CSS .hover和.no_hover的順序，然後切換.hover，因爲它將替換.no_hover（由於默認的.no_hover而導致反向） – 2012-04-27 17:26:10

猜想邊框的簡寫是： border：1px＃000 solid; – KBN 2012-04-27 17:26:18

這裏有一些代碼可以幫助你使用你的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服務器的虛擬路徑。

您的代碼有效。看到這個小提琴：http://jsfiddle.net/pratik136/x4zda/

來源

2012-04-27 17:07:00 bPratik

我試着在你的小提琴，但它不工作..看起來像一個瀏覽器問題..我需要在我的瀏覽器上啓用任何東西。 – user1050619 2012-04-27 17:10:48

你使用什麼瀏覽器？我嘗試過Chrome，FF和IE9 – bPratik 2012-04-27 17:11:27

它適用於Firefox-11.0，而不適用於IE-9。 – user1050619 2012-04-27 17:12:35

當您本地化您的js和CSS文件時工作正常。

See this JSFiddle

嘗試下面的代碼，其中包括一個網頁內的一切。

<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類不按預期工作

回答

相關問題