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

Question

我在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>    

使用Javascript

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

Answer 1

自举按钮最好应在其自己的元素中使用，尝试将它们包装在另一个元素中，然后将其隐藏在您的代码中。

<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>

Answer 2

您的jQuery几乎没有错。 您缺少结尾的圆括号）和分号; 。 因此，您的jQuery应该看起来像这样：

jQuery的：

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

现在，我在下面的小提琴已经试过这里 ，锚被显示在相同的位置。 因此，您的CSS代码可能有问题。

共享CSS代码以获取详细的解决方案。

Answer 3

如何同时浮动两个按钮，如果这样做无济于事，则应将所有代码公开在某个地方，例如jsfiddle

#selectAll, #removeAll {
    float: left;
}