Question

非常感谢ALOT！我现在已经开始工作了，谢谢！

我有一个很有希望的问题：这：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>

Answer 1

将它放在你的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>

Answer 2

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

Answer 3

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

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

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

Answer 4

<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>

单击时更改<div>的颜色</div>

4 个答案: