当单击取消按钮时返回同一页面的Javascript代码

Javascript code to get back to the same page when click the cancel button

本文关键字：一页 Javascript 代码 返回 单击 取消 按钮      更新时间：2023-09-26

我使用javascript代码来扩展和折叠我的div内容。以下是我的代码:

    <style type="text/css">
    .gap
    {
     border:1px solid black
    }
    </style>
    <script type="text/javascript">
        function toggle_visibility(id) {
           var e = document.getElementById(id);
           if(e.style.display == 'none')
              e.style.display = 'block';
           else
              e.style.display = 'none';
        }
        function edit(id,item)
        {
           var e = document.getElementById(id);
           var f = document.getElementById(item)
          e.innerHTML=f.innerHTML;
        }
    </script>
    <a href="#" onclick="toggle_visibility('id1');" ><div class="gap">Click here to toggle visibility of element #foo</div></a>
<div id="id1" style="display:none;">This is foo</div>
 <a href="#" onclick="toggle_visibility('id2');" ><div class="gap">Click here to see      wonder</div></a>
<div id="id2" style="display:none;">Tsdgdfsehd
<div> <a href="#"  onclick="edit('id2','id3');">Edit</a></div>
</div>
    <div id="id3" style="display:none;">Edit
    <div> <a href="#"  onclick="edit('id3','id2');">cancel</a></div>
    </div>

我面临的问题是…当我点击第二个div，它正在扩展，我已经在第二个div里面给出了一个编辑选项…然后点击编辑它是覆盖第二个div元素并显示第三个div元素。同样，在第三个div中，我给出了取消编辑部分和显示第二个div内容的链接，但它没有显示…

我在等待帮助。

Thanks In advance

使用

location.reload();

使用以下功能取消点击

function cancel(){
       location.reload(); 
}
<a href="#"  onclick="cancel()">cancel</a>

使用以下命令重新加载div 2

function edit(id,item)
 {
    var e = document.getElementById(id);
    var f = document.getElementById(item);
          // Add this line additional
    document.getElementById('id4').innerHTML=e.innerHTML;
    e.innerHTML=f.innerHTML;
  }
function cancel(){
    document.getElementById('id2').innerHTML=document.getElementById('id4').innerHTML;
}
 <a href="#"  onclick="cancel()">cancel</a>

也添加这个隐藏的div

<div id="id4" style="display:none;"></div>

在取消时调用一个javascript函数，其中包含:

window.location=window.location;

这是唯一的方法，我发现在你的代码

onclick = " toggle_visibility (id2); 

 <div id="id3" style="display:none;">Edit
 <div> <a href="#" onclick="toggle_visibility('id2');">cancel</a></div>
 </div>

你的解决方案在这里

查看此处jsfiddle

 <%-- 
Document   : ul
Created on : Jun 18, 2013, 10:23:01 AM
Author     : Genesh
 --%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>JSP Page</title>
</head>
<body>
<style type="text/css">
.gap
{
 border:1px solid black
}
 </style>
 <script type="text/javascript">
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'none')
          e.style.display = 'block';
       else
          e.style.display = 'none';
    }
    function edit(id,item)
    {
          var e = document.getElementById(id);
          e.style.display = 'block';
           var s = document.getElementById(item);
          s.style.display = 'none';
    }
       function edit1(id,item)
    {
          var e = document.getElementById(id);
          e.style.display = 'block';
      var s = document.getElementById(item);
          s.style.display = 'none';
    }
</script>
<a href="#" onclick="toggle_visibility('id1');" ><div class="gap">Click here to toggle visibility of element #foo</div></a>
 <div id="id1" style="display:none;">This is foo</div>
  <a href="#" onclick="toggle_visibility('id2');" ><div class="gap">Click here to see      wonder</div></a>
 <div id="id2" style="display:none;">Tsdgdfsehd
 <div> <a href="#"  onclick="edit('id3','id2');">Edit</a></div>
 </div>
<div id="id3" style="display:none;">Edit
<div> <a href="#"  onclick="edit1('id2','id3');">cancel</a></div>
</div>
</body>
</html>
相关文章：