Question

解决这个问题。提供CSS和HTML代码！但是add div标签功能不起作用。删除后如何将div标签添加到html页面？

编写以下代码：

a）编写CSS Class Header块：border 1，color-blue，font size-20，font name-arial，padding 50px。

b）编写CSS类页脚块：边框1，颜色 - 黑色，高度-20％，宽度-100％，背景颜色 - 灰色;

c）在按钮单击时为Add Header块Class和Footer块写一个jquery代码。

d）在按钮单击时为Remove Header块Class和Footer块写一个jquery代码。

e）在按钮点击时为Toggle Header块Class和Footer块写一个jquery代码。

$(document).ready(function() {
  $('.remove').click(function() {
    $('.header').remove();
    $('.footer').remove();
  });
});

$(document).ready(function() {
  $('.add').click(function() {
    $('body').addClass('div.header');
    $('body').addClass('div.footer');
  });
});

.header {
  border: 1px solid;
  color: blue;
  font-size: 20;
  font-family: arial;
  padding: 50px;
}

.footer {
  border: 1px solid;
  color: black;
  height: 20%;
  width: 100%;
  background-color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <link rel='stylesheet' style='text/css' href='a30.css'></link>
  <script src='../jquery.js'></script>
</head>

<body>
  <div class='header'>
    This is header!
  </div>
  <button class='add'>Add</button>
  <button class='remove'>Remove</button>
  <div class='footer'>
    This is footer!
  </div>

</body>

</html>

请帮我找一个解决方案！

Answer 1

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>
</head>
<body>

<p>If you click on the "Hide" button, I will disappear.</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

jQuery中的remove（）函数删除元素，因此您需要再次创建所有内容。如果要切换元素，使用隐藏和显示功能将是最好的方法。

Answer 2

您的JavaScript不正确，您的代码会在<body class="div.header div.footer">代码中添加2个类，最终结果为：$(document).ready(function() { $('.add').click(function() { $('body').addClass('div.header'); $('body').addClass('div.footer'); }); });

相反，您需要将元素添加到正文中。

更新

$(document).ready(function() {
  $('.add').click(function() {
    $('body').prepend('<div class="header"></div>');
    $('body').append('<div class="footer"></div>');
  });
});

为：

$('body').prepend()

$('body').append()会将元素添加到提供的元素的开头 $(document).ready(function() { $('.remove').click(function() { $('.header, .footer').hide(); // hide footer and header divs }); $('.add').click(function() { $('.header, .footer').show(); // show footer and header divs }); });会将元素添加到提供的元素的末尾

注意：因为前置/附加的div是空的，所以它们将添加为空，如果需要，可以在添加时在这些元素中添加更多html。

或者如上所述，您可以使用以下方法隐藏/显示页眉/页脚元素：

Bob Jones <bob@example>

JQuery Div标记代码

2 个答案: