-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

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

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

于 2012-04-27T17:07:00.177 回答
1

这里有一些代码可以帮助您使用 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-27T18:19:08.550 回答
0

js本地化和CSS文件时工作正常。

看到这个 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-27T17:11:18.957 回答