使用jquery隐藏所有其他类，而只有一个是活动的

Question

我对这个jquery的东西有点新。我试图做的是使用链接切换类，它们保存页面的元素。我需要做的是使用一个脚本来调用一个链接的元素，但隐藏所有与其他链接相关的其他元素，以便一个人只能点击一次链接来获取该页面的元素，并且拥有其他所有内容隐。我一直在使用jquery中的toggleclass函数，但是这要求用户点击一次来激活一个类的元素，但是在点击另一个链接之前再次点击删除它们。

这甚至可能吗？我发现一些JavaScript，似乎它做我需要它，但我不明白它足以实现它。

我更喜欢它是jquery，因为我似乎有一个体面的把握，但不是在整个JavaScript。 （我通过反复试验教自己所有类型的技巧）

Answer 1

您可以使用each()遍历元素。因此，在each()内，只需在元素上执行.hide()。

隐藏的元素应该是这样的：

$('#id).hide(); 

每个文档is here。

Answer 2

基本和简单的解决方案

样本HTML：

<ul id="controls"> 
    <li><button data-value="#a" type="button">show a</button></li> 
    <li><button data-value="#b" type="button">show b</button></li> 
</ul> 

<div id="elements"> 
    <div id="a" class="element"></div> 
    <div id="b" class="element"></div> 
</div> 

脚本： 此进去控件ID的所有按钮和调用一个函数分配到的数据值属性的值称为toggleElements按钮。

$(document).ready(function() { 
    $('#controls button').click(function() { 
     toggleElements($(this).attr('data-value')) 
    }); 
}); 

的toggleElements功能检查，如果目标是/有东西，如果这样做，它会隐藏所有元素，并显示目标之一。

function toggleElements(target) { 
    if (target && $(target).length >0) { 
     $('element').hide(); 
     $(target).show(); 
    } 
} 

Answer 3

我喜欢Bart的答案，但我不知道真的是OP试图在他的问题来形容。 OP，你能给我们一些示例代码来更好地绘制问题图片吗？我想到OP想要做这样的事情。

// Your HTML something like... 
// Note: They can be any elements, divs, span, whatever, give element an id. 

<a id="alpha">Toggle type one</a> 
<a id="bravo">Toggle type two</a> 

<div class="typeOne"></div> 
<div class="typeOne"></div> 
<div class="typeTwo"></div> 
<div class="typeTwo"></div> 

// Your jQuery something like this: 

$('#alpha').click(function() { 
    $('.typeOne').show(); 
    $('.typeTwo').hide(); 
} 

$('#bravo').click(function() { 
    $('.typeTwo').show(); 
    $('.typeOne').hide(); 
} 

基本上，这将使所有的元素首先可见。当他们点击链接id =“alpha”时，它会显示class =“typeOne”的所有元素，并隐藏class =“typeTwo”的元素。当你点击链接id =“bravo”时，它隐藏了typeOne并显示了type2 ...

Answer 4

不确定具体情况适合你，但根据你的结构，你总是可以使用.siblings()。

举一个例子，有以下设置：

<div id="mydiv"> 
    <p id="p1">Something1</p> 
    <p id="p2">Something2</p> 
    <p id="p3">Something3</p> 
</div> 

你的jQuery会再看看这样的：

$("#p1").show().siblings().hide(); 

这是假设你有你的CSS display:hide;集。

Answer 5

最简单的菜单我所创建如下：

// jQuery代码//

$(document).ready(function(){ 
     $('ul li', this).click(function(){ 
      $('#' + $(this).text()).css({display: 'block'}).siblings().hide() 
     }); 
    }); 

// HTML代码//

<div id="main"> 
    <ul> 
     <li>Home</li> 
     <li>Product</li> 
     <li>FAQ</li> 
     <li>Contact</li> 
    </ul> 
    <div id="content"> 
     <div id="Home">First DIV</div> 
     <div id="Product">Second DIV</div> 
     <div id="FAQ">Third DIV</div> 
     <div id="Contact">Fourth DIV</div> 
    </div> 
</div> 

// // CSS

ul { padding: 0px; margin: 0px; } 
li { float: left; width: auto; padding: 5px 50px 5px 50px; background: #999; color: #fff; list-style-type: none; border: 1px solid #333; } 
#content div { border-bottom: 1px solid #000; padding: 5px; clear: both; border-top: 1px solid white; display: none;} 
#content div#item4{ border-bottom: 1px solid white;} 
#main { border: 1px solid #000; float: left; }