Question

我想显示2个链接 - 显示和隐藏。当我单击Show时，Show应该被隐藏，Hide应该是可见的，当我点击Hide时，隐藏应该隐藏，Show应该是可见的。我怎样才能在html中实现这一点？

Answer 1

头部有jquery

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>

和每个按钮的ID

<input type='button' id='show' value='Show' />
<input type='button' id='hide' value='Hide' />

你可以这样做这个未经测试的代码 ......

<script type='text/javascript'>
    $(function(){
        $('#show').click(function(){
            $('#hide').hide()
        })
        $('#hide').click(function(){
            $('#show').hide()
        })
    })
</script>

Answer 2

你真的只想在点击“show”时隐藏“hide”，反之亦然？因为这就是你所要求的，但它并不像“标准”（切换）行为那样。

但这是：

请参阅 this 摘要。

<强> HTML：

<a href="#" id="show">SHOW</a>
<a href="#" id="hide">HIDE</a>

<强> JS：

var showElem = document.getElementById("show");
var hideElem = document.getElementById("hide");

showElem.onclick = function() {
   hideElem.style.display = 'none';
}

hideElem .onclick = function() {
   showElem.style.display = 'none';
}

您可以使用仍会隐藏链接的.style.display = 'none';代替.style.visibility = 'hidden'，但会有空格而不是它，并且它不会完全消失（请参阅 {{3 } 代码段。

更新：根据评论部分中的讨论，创建了具有更多“标准”行为的新简单示例（请参阅this）。如果预计页面会影响效果或其他javascript功能（如Ajax），我建议使用第三方库（如jQuery）来简化实现 - 请参阅 Billy Moon 的回答。

在html中隐藏/显示链接

2 个答案: