Question

我的HTML代码没有实现CSS样式.. CSS文件中的边框没有实现。我在Firefox＆amp; 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 FILE

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

CSS FILE

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

Answer 1

问题可能在于您将文件链接为文件系统的路径......您希望将CSS和JS文件作为虚拟路径链接到您的文件系统网络服务器。

您的代码有效。看到这个小提琴：http://jsfiddle.net/pratik136/x4zda/

Answer 2

这里有一些代码可以帮助您使用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");
    });
});

Answer 3

在您对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>

CSS类没有按预期工作

3 个答案: