Question

我在JSP中定义了以下锚属性。点击“将所有计划添加到购物车”后，我希望“将所有计划添加到购物车”按钮进行隐藏，并将“从购物车中移除所有计划”显示在与“将所有计划添加到购物车”相同的位置。< / p>

隐藏和显示工作正常。但是“从购物车中删除所有计划”显示在下一行。我希望它完全取代“将所有计划添加到购物车”按钮。我在我的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

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

<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();
});

现在，我已尝试使用以下小提琴here，锚点显示在相同的位置。所以你的css代码可能有问题。

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

Answer 3

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

#selectAll, #removeAll {
    float: left;
}

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

3 个答案: