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类不按预期工作

回答

相关问题