使用jquery隐藏所有其他类,而只有一个是活动的
我对这个jquery的东西有点新。我试图做的是使用链接切换类,它们保存页面的元素。我需要做的是使用一个脚本来调用一个链接的元素,但隐藏所有与其他链接相关的其他元素,以便一个人只能点击一次链接来获取该页面的元素,并且拥有其他所有内容隐。我一直在使用jquery中的toggleclass函数,但是这要求用户点击一次来激活一个类的元素,但是在点击另一个链接之前再次点击删除它们。使用jquery隐藏所有其他类,而只有一个是活动的
这甚至可能吗?我发现一些JavaScript,似乎它做我需要它,但我不明白它足以实现它。
我更喜欢它是jquery,因为我似乎有一个体面的把握,但不是在整个JavaScript。 (我通过反复试验教自己所有类型的技巧)
如果我在要隐藏的事物类型中指定使用id =“”,那么是否也可以使用.show和.hide事件? – 2012-02-01 19:08:01
是的,您可以使用显示和隐藏事件,但如果您试图显示和隐藏大量事物,它可能会变得非常匆忙。或者,您可以将元素停放在容器div中,并隐藏div,这会隐藏所有内容。 – bpeterson76 2012-02-01 19:21:00
这基本上是我试图做的,我已经尝试过了,它的工作,我只需要得到正确的时间。它的一小段代码,大约一页,但对我来说很容易跟踪这种方式。感谢您指点我正确的方向! – 2012-02-01 19:26:22
基本和简单的解决方案
样本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();
}
}
我喜欢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 ...
不确定具体情况适合你,但根据你的结构,你总是可以使用.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;
集。
最简单的菜单我所创建如下:
// 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; }
这可能会导致正确的方向,但不直接引用实际问题(使用'class' not'id',跟踪当前状态),是吗? – hielsnoppe 2012-10-10 19:02:31
你应该举一个例子来说明你的想法。 – Alexander 2012-02-01 19:05:12