Question

我有4个链接。其中3个应该是可见的，但是当3个中的一个被点击时，第4个应该出现。如果第3个中的任何一个被按下，则没有任何应该改变但是如果第4个（第一次点击时出现的那个）被点击它会消失并且那里应该只有3个。关于如何做的任何想法？可能它将使用JQuery完成？！

Answer 1

为第3和第4个链接指定ID并设置样式visibility: hidden;

然后使用JQuery：

var 3rdLink = $("#3rdLinkId"),
    4thLink = $("#4thLinkId"); //just good practice    
3rdLink.on('click', function(event){
    event.preventDefault();  //just in case it's a hyperlink
    4thLink.css('visibility', 'visible');
)};

您有很多选项可以使用JQuery显示元素，这一切都非常简单。

但是真的，这到处都是。一个简单的谷歌搜索就足够了

Answer 2

如果你的链接看起来像这样：

<a href="#" class="show" onclick="show4()" >link 1</a>
<a href="#" class="show" onclick="show4()" >link 2</a>
<a href="#" class="show" onclick="show4()" >link 3</a>
<a href="#" id="link4" class="hide" onclick="hide4()" >link 4</a>

你可以用这个：

<style>
.hide {display: none;}
.show {display: block;}
</style>
<script>
function show4() 
{
    document.getElementById('link4').style.display = "block";
}
function hide4() 
{
        document.getElementById('link4').style.display = "none";
}
</script>

Answer 3

JSFiddle Demo Here

对于一组链接：

<div>
    <a href='#' id='link1' onclick='toggle(this)'>link 1</a>
    <a href='#' id='link2' onclick='toggle(this)'>link 2</a>
    <a href='#' id='link3' onclick='toggle(this)'>link 3</a>
    <a href='#' id='link4' style='display:none' onclick='toggle(this)'>link 4</a>
</div>

使用javascript：

var disp = false;

function toggle(el) {
    if (disp) {
        if (el.id == 'link4') {
            document.getElementById('link4').style.display='none';
            disp = false;
        }
    } else {
        if ((el.id == 'link1') || (el.id == 'link2') || (el.id == 'link3')) {
            document.getElementById('link4').style.display='block';
            disp = true;
        }
    }
}

当您点击前3个链接中的任何一个时，将显示第4个链接，当您单击第4个链接时（第4个链接）将消失。

修改：根据要求，here是同样褪色的演示。至于代码，HTML是相同的，JQuery代码是：

var disp = false;

function toggle(el) {
    if (disp) {
        if (el.id == 'link4') {
            $('#link4').fadeOut();
            disp = false;
        }
    } else {
        if ((el.id == 'link1') || (el.id == 'link2') || (el.id == 'link3')) {
            $('#link4').fadeIn();
            disp = true;
        }
    }
}

Answer 4

让我们说你的HTML看起来像这样

<div id="link-container">
    <a href="#">link1</a>
    <a href="#">link2</a>
    <a href="#">link3</a>
    <a href="#">link4</a>
</div>

的CSS

#link-container a:last-child{display:none}

使用jQuery框架的Javascript

$(function(){
    $('#link-container').on('click', 'a',function(e){
        var $t = $(this),
            $last = $t.siblings('a').addBack().last();
        if($last[0] != this){
           $last.toggle();
        }
    });
});

小提琴here

单击时添加其他菜单项

4 个答案: