更改/删除div id并刷新页面异步

时间:2014-09-04 14:32:52

标签: javascript jquery html css ajax

我想知道如何删除按钮上的div id并将其添加到另一个按钮上,以便关联CSS加载。然后应该异步刷新页面以显示更改。 到目前为止,我已经能够通过点击按钮删除id。



$("#Remove").on('click', function() {
  $("#slides").removeAttr("id");
});
$('#Add').on('click', function() {
  $("#main-wrapper > div").attr("id", "slides");
});

var pathname = window.location.host;

$("#Remove").click(function() {
  $("#main-wrapper").load(pathname);
});
//add code to refresh main-wrapper on any button click

#slides h1 {
  color: black;
  background: grey;
  float: none;
}
h1 {
  background: green;
  color: white;
  width: 20vw;
  float: left;
  padding: 10px;
  margin: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Remove">Remove id</button>
<button id="Add">Add id</button>
<div id="main-wrapper">
  <div id="slides">
    <div class="slides-container">
      <h1>This is a sample text</h1>
      <h1>You are awesome</h1>
      <h1>This is another line</h1>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:3)

$(document).ready(function(){
  $("#Remove").on('click', function(){
    $("#slides").removeAttr("id"); 
  });
  $('#Add').on('click', function(){
    $("#main-wrapper > div").attr("id", "slides");
  });
});