如何隐藏一个锚标记并在同一位置显示另一个锚标记

How to hide an anchor tag and display another anchor tag in the same place

本文关键字：另一个 显示 位置 一个 何隐藏 隐藏      更新时间：2023-09-26

我的JSP中定义了以下锚属性。单击"将所有计划添加到购物车"后，我希望"将所有计划添加到购物车"按钮隐藏，并将"从购物车中删除所有计划"显示在与"将所有计划添加到购物车"相同的位置。

隐藏和显示工作正常。但是"从购物车中删除所有计划"显示在下一行。我希望它完全取代"将所有计划添加到购物车"按钮。我在我的Javascript文件中尝试了各种方法，包括document.getElementById和inline，inline-block ete，但没有一个奏效。

感谢任何输入。谢谢。

.JSP

<a id="selectAll" class="primaryButton btn btn-small" style="margin-left:10px">
    Add All Plans To Cart
</a>
<a id="removeAll" style="display:none" class="primaryButton btn btn-small" style="margin-left:10px">
    Remove All Plans From Cart
</a>

爪哇语

$("#selectAll").click(function () 
{
    $("#selectAll").hide();
    $("#removeAll").show();
});

引导按钮最好在它们自己的元素中使用，尝试将它们包装在另一个元素中，然后被你的代码隐藏。

<span id="selectAll" style="margin-left:10px">
  <a class="primaryButton btn btn-small">
    Add All Plans To Cart
  </a>
</span>
<span id="removeAll" style="margin-left:10px; display:none">
  <a class="primaryButton btn btn-small">
    Remove All Plans From Cart
  </a>   
</span>

你的jQuery几乎没有错。您缺少结束圆括号 ） 和分号 ;。所以你的jQuery应该看起来像这样：

j查询 ： 

$("#selectAll").click(function () {
     $("#selectAll").hide();
     $("#removeAll").show();
});

现在，正如我在下面的小提琴中尝试的那样，锚点显示在相同的位置。所以你的 css 代码可能有问题。

分享 css 代码以获得详细的解决方案。

浮动两个按钮怎么样，如果这没有帮助，你应该在某个地方公开你的所有代码，jsfiddle例如

#selectAll, #removeAll {
    float: left;
}
相关文章：