交换html / css按钮的位置

时间:2017-03-06 07:12:17

标签: html css

我使用html / css创建了一个开/关按钮。单击开启或关闭按钮时,它将使用href标记链接到python脚本。但我不希望按钮出现分离。所以我正在尝试的是当点击ON按钮时,关闭按钮应该不可见或隐藏,反之亦然。单击一个按钮时,应将其位置与另一个按钮交换。因此它将显示为单个按钮。

key: function (file,metacontext) {
  let timeStamp = + new Date;
  let newFilename = metacontext ? metacontext.newName : file.name;
  newFilename = newFilename.replace(/_/g , "-");
  return  'Team_Term_Papers/' + timeStamp + '_' + '_' + newFilename;
}

2 个答案:

答案 0 :(得分:0)

如果我理解你的问题,这样的事可能会有所帮助。

点击即可调用javascript函数。

<script>
    var hidden = false;
    function action() {
        hidden = !hidden;
        if(hidden) {
            document.getElementById('ON').style.visibility = 'hidden';
        } else {
            document.getElementById('OFF').style.visibility = 'visible';
        }
    }
</script>

答案 1 :(得分:0)

您可以根据ID和类添加Jquery,如下所示

<div class="col-xs-12 col-sm-9">
    <h2>Famous Actors</h2>
      <ul class="media-list">
         <!--works fine in here-->
           <img class="movie-img media-object img-thumbnail" ng-src="{{actors[0].image}}" width="120px">
           <li class="media" ng-repeat="actor in actors">
           <div class="media-left">
              <!--doesn't work in here-->
              <img class="movie-img media-object img-thumbnail" ng-src="{{actor.image}}" width="120px">
           </div>
           <div class="media-body">
              <h3 class="media-heading">{{actor.name}}</h3>
              <p>{{actor.description}}</p>
           </div>
          </li>
     </ul>
</div>
$(".movie-img").click(function() {
    console.log("clicked!");
    var span = document.createElement("span");
    span.className = "close-x";
    span.appendChild(document.createTextNode("X"));

    var img = document.createElement("img");
    img.className = "img-thumbnail";
    img.src = $(".movie-img")[0].src;

    var div = document.createElement("div");
    div.className = "full-image";

    div.appendChild(img);
    div.appendChild(span);
    $(this).parent().append(div);

    $(".close-x").click(function() {
        $(".full-image").remove();
    });   
 });