-2

非常感谢你们！我现在可以用了，谢谢！

我有一个希望简单的问题：这个：http: //jsfiddle.net/gSAjV/2/ 是我想要实现的，但我似乎无法让它工作。我是 javascript 的新手，所以我不确定如何正确地将脚本放入 html 文档中。我已经尝试过<script type="text/javascript">和其他人，但它只是不起作用。

所以我想知道是否有人会花时间把它放在一个 html 文档中并让它工作，当然还有发布整个代码。我会很高兴的！

我的医生：

<html>
<head>

<style>
.parentDiv{
 border:1px solid black;
 padding:10px;
 width: 80px;
  margin:5px;  
    display:relative;
}


.childDiv{
  border:1px solid blue;
 height: 50px;   
    margin:10px;
}
</style>

<script type='text/javascript'>
$('.childDiv').click(function(){
    $(this)
        .css('background-color','#00ff66')
        .siblings()
        .css('background-color','#ffffff');
});
</script>

</head>
<body>

<div id="divParent1" class="parentDiv">
    Group 1
    <div id="child1" class="childDiv">
        Child 1
    </div>
    <div id="child2" class="childDiv">
        Child 2
    </div>
</div>
<div id="divParent2" class="parentDiv">
    Group 2
    <div id="child1" class="childDiv">
        Child 1
    </div>
    <div id="child2" class="childDiv">
        Child 2
    </div>
</div>

</body>
</html>
4

4 回答 4

2

把它放在你的 html 文件中的某个地方：

<script type="text/javascript">                                         
    $(document).ready(function() {
        $('.childDiv').click(function(){
            $(this).parent().find('.childDiv').css('background-color','#ffffff');
            $(this).css('background-color','#ff0000');
        });
   });
</script>

你可以或多或少地把它放在任何地方，但在</body>标签之前是个好地方。

正如@MarkK 正确指出的那样，您需要引用jQuery 库本身。

这介于<head>和之间</head>：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
于 2012-06-22T13:12:02.577 回答
1

在 jsfiddle 中，您可以右键单击结果窗格并查看源代码。这将为您提供产生结果的确切 html。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>

  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
    .parentDiv{
 border:1px solid black;
 padding:10px;
 width: 80px; 
  margin:5px;  
    display:relative;
}


.childDiv{
  border:1px solid blue;
 height: 50px;   
    margin:10px;
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('.childDiv').click(function(){
    $(this).parent().find('.childDiv').css('background-color','#ffffff');
    $(this).css('background-color','#ff0000');
});



});//]]>  

</script>


</head>
<body>
  <div id="divParent1" class="parentDiv">
    Group 1
    <div id="child1" class="childDiv">
        Child 1
    </div>
    <div id="child2" class="childDiv">
        Child 2
    </div>
</div>
<div id="divParent2" class="parentDiv">
    Group 2
    <div id="child1" class="childDiv">
        Child 1
    </div>
    <div id="child2" class="childDiv">
        Child 2
    </div>
</div>

</body>


</html>
于 2012-06-22T13:14:58.843 回答
1

您只需要导入 jQuery（包含$函数的库）。这很简单，只需添加

<script src="http.//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

到您的 HTML，在您的其他脚本之前。

于 2012-06-22T13:17:35.370 回答
1 
<html>
  <head>
     <!--inclue jquery - change the path 'src'. the default is jquery.js is on the same location of this html-->
     <script type="text/javascript" src="jquery.js"></script>
     <sript type="text/javascript">
       jQuery().ready(function($){

          $('.childDiv').click(function(){
             $(this).parent().find('.childDiv').css('background-color','#ffffff');
             $(this).css('background-color','#ff0000');
           });

       });
     </script>
   </head>
   <body>
      <!--the content paste your html here-->
   </body>
</html>
于 2012-06-22T13:18:25.503 回答