元素在通过单击链接隐藏后重新出现(需要不包含返回 false 或 preventDefault 的解决方案）

Element reappears after hiding it by clicking a link (need solution that doesn't include return false or preventDefault)

本文关键字：返回 包含 false 解决方案 preventDefault 单击 链接 隐藏 新出现 元素      更新时间：2023-09-26

我有一个元素（里面有链接的 DIV），我需要通过单击链接来隐藏，以及单击该链接后要显示的表单，问题是链接的div在隐藏后不久重新出现，如果我使用 return false 或 preventDefault ，它会起作用，但它会阻止将href值添加到 url， 我真的需要添加它。

这是代码 

<body>
<div id="categContainer1">
 <div class="titimmo"><a href="ajoutertest.php?c=realestate"        id="a_categ">Real Estate</a></div>
</div>
<div id="formContainer" class="hidden">
            <form action="ajouter.php" method="post">
                 <h4>Category:</h4>
                 <h4>Made :</h4>
                 <input type="text" name="made" />
                 <h4>Model :</h4>
                 <input type="text" name="modele" /><br /><br />
                 </form>
    </div>
</body>

<script type="text/javascript">
    function stepone(){
    document.getElementById('a_categ').onclick = function () {
    document.getElementById('categContainer1').className += " hidden";
    document.getElementById('formContainer').className = "visible";
    };
    }
    stepone();
</script>
<style type="text/css">
    .titimmo {
      text-align:center;
        padding:10px;
        font-size:14pt;
      background-color:#CC3300;
      display:block;
    }
    .hidden {
        display:none;
    }
    .visible {
        display:block;
    }
    #formContainer {
      padding: 1em 0 1em 2em; background-color:#E8E8E8; margin: 1em 0 1em 2em; width:88.9%;
    }
    #formContainer h4{
      color:#FF3300;
    }
</style>

这是小提琴

如果可以做到其他方式，任何帮助将不胜感激，我只需要在 URL 中添加href值。

你必须使用 Javascript 的历史操作函数。

function stepone(){
          document.getElementById('a_categ').onclick = function () {
            document.getElementById('categContainer1').className += " hidden";
            document.getElementById('formContainer').className = "visible";
          window.history.pushState('Form', 'My form',   this.getAttribute("href"));
          return false
       };
    }  
  stepone();
相关文章：