Question

除了javascript中的一个链接外，隐藏所有链接的最佳方法是什么？（jquery没问题）

说我有以下内容：

<div id="choices"> 
  <div><a href="#">A<></div> 
  <div><a href="#">B</a></div> 
  <div><a href="#">C</a></div> 
</div>

我想这样做，如果用户点击链接A，B或C，则不包含所选内容的div将消失，并且会在警告框中弹出所选的选项。单击重置按钮后，所有div都会正常显示。

示例：用户单击A，导致B和C div隐藏。用户踢“重置”按钮，然后再次显示。

我如何做到这一点？

注意：我已经分别为每个A，B，C div分配了ID，并且创建了一个函数，当用户点击B时，它会为我想要隐藏的那些调用$（divnotclicked）.hide（）。对于重置按钮，我只为它们中的每一个执行.show（）$（A）.show（），$（b）$ .show（）（C）.show（）....但是这些必须是一个没有我为每个人分配ID的方法。我正在寻找最好的方法。

我正在寻找最好的方法，最好不要为每个人手动调用函数或为“choices”div中的每个div分配ID。或者在单击“重置”按钮时必须将每个div调用为“.show”。

Answer 1

使用jQuery，它非常简单：

$('#choices div').click(function() { $(this).siblings().hide(); });
$('#resetButton').click(function() { $('#choices div').show(); });

此外，这里有一个jsFiddle代码。一般来说，当您需要使用jQuery（或其他框架）时，jsFiddle是一个非常好的工具。

Answer 2

只需获取所有链接并删除使用not方法点击的链接：

$('#choices a').click(function(e){
  e.preventDefault(); // stop the click from activating the link
  $('#choises a').not(this).parents().hide();
  // do something with the chosen link
});

$('#reset').click(function(){
  $('#choices a').parents().show();
});

Answer 3

为每个链接指定其个人ID。并为所有这些类添加相同的类例如：

<a class="mylinks" id="link01" href="someURL">friendly text</a>

然后，当有人点击您的某个按钮时，请将该类的css-visibility设置为隐藏，然后将属于该按钮的ID的可见性设置为再次可见。

Answer 4

我将如何做到这一点：

$('#choices a').click(function() {
    $(this).parent().siblings().hide();
});

重置：

$('#resetButton').click(function() {
    $('#choices div').show();
});

以下是一个有效的例子：http://jsfiddle.net/W9Sym/

Answer 5

使用：

<div id="choices"> 
    <div><a href="#">A</a></div> 
    <div><a href="#">B</a></div> 
    <div><a href="#">C</a></div> 
</div>
<button>Reset</button>

隐藏未选中的div并将重置显示为here's a demo

$(function() {

    $('#choices').on('click', 'a', function() { //bind click handler to choices, for links
        $(this).parent().siblings().hide();     //find the others and hide them
    });

    $('button').on('click', function() {        //bind click to button
        $('#choices > *').show();               //show all children of choices           
    });

});

Answer 6

您可以尝试这样做： HTML

<div id='A'>Hi, I'm A</div>
<div id='B'>Hello</div>
<div id='C'>Aaargh!</div>

<a href='#A'>A</a>
<a href='#B'>B</a>
<a href='#C'>C</a>

<button type='reset'>Reset</button>

的jQuery

$('a').click( function() {
   var show = $(this).attr('href');
   $('div').each( function(e) {
       $(this).not(show).hide();
   });
   e.preventDefault();
});

$('button').click( function() {
   $('div').show();
});

有点冗长，但它应该完成工作。

隐藏除javascript之外的所有链接？

6 个答案: