Onclick 显示/隐藏多个 Divs Jquery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12083142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Onclick Show / Hide Multiple Divs Jquery
提问by Filth
I need to create navigation that shows / hides multiple divs.
我需要创建显示/隐藏多个 div 的导航。
Here is what I need to be able to do: If a user clicks on any of the "options" I need a class named "selected" associated to the current selected or chosen item within the nav - this means adding a class to the anchor. You will see there is CSS styling for the class "selected" in my example below.
这是我需要能够做的事情：如果用户单击任何“选项”，我需要一个名为“ selected”的类，该类与导航中当前选定或选定的项目相关联 - 这意味着向锚点添加一个类. 在下面的示例中，您将看到“selected”类的 CSS 样式。
I am also having trouble trying to have either "option 1" or "option 2" already selected onload so that all of the divs do not appear - Onload I need only one div to appear with the correct "option" "selected" if that makes sense.
我也无法尝试在加载时选择“选项 1”或“选项 2”，以便所有 div 都不会出现 - 加载时我只需要一个 div 即可显示正确的“选项”“选择”，如果那样的话说得通。
All suggestions welcome!
欢迎所有建议！
回答by adeneo
You should use data attributes, as just targetis'nt really valid. I changed it to data-targetand did:
您应该使用数据属性，因为这target不是真正有效的。我把它改成data-target并做了：
$('.showSingle').on('click', function () {
$(this).addClass('selected').siblings().removeClass('selected');
$('.targetDiv').hide();
$('#div' + $(this).data('target')).show();
});?
on()will only work in jQuery 1.7+, so if using an older version of jQuery (your fiddle is), stick with click().
on()仅适用于 jQuery 1.7+，因此如果使用旧版本的 jQuery（您的小提琴是），请坚持使用click().
回答by irrelephant
See http://jsfiddle.net/XwN2L/415/. It removes the class "selected" from all .showSingleanchors, then adds the class "selected" to the clicked anchor. Also, it handles the onload problem by hiding all the .targetDivs and showing only the first one.
见http://jsfiddle.net/XwN2L/415/。它从所有.showSingle锚点中删除“selected”类，然后将“selected”类添加到单击的锚点。此外，它通过隐藏所有.targetDivs 并仅显示第一个来处理加载问题。
EDIT:Should highlight the first option in red on page load too. http://jsfiddle.net/XwN2L/421/
编辑：也应该在页面加载时以红色突出显示第一个选项。http://jsfiddle.net/XwN2L/421/
回答by Joe Posorski
EDIT:for a non JQuery solution try this:
编辑：对于非 JQuery 解决方案，试试这个：
function showHide(element) {
var field = document.getElementById(element);
if (element) {
if (field.style.display == 'none') {
field.style.display = 'block';
} else {
field.style.display = 'none';
}
}
}
That would be your code to show and hide in your JS
这将是您在 JS 中显示和隐藏的代码
<div class="buttons">
<button class="showSingle" target="1" onClick="showHide(div1);">Option 1</button>
<button class="showSingle" target="2" onClick="showHide(div2);">Option 2</button>
<button class="showSingle" target="3" onClick="showHide(div3);">Option 3</button>
<button class="showSingle" target="4" onClick="showHide(div4);">Option 4</button>
</div>
<div id="div1" class="targetDiv" style="display:none">Lorum Ipsum 1</div>
<div id="div2" class="targetDiv" style="display:none">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv" style="display:none">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv" style="display:none">Lorum Ipsum 4</div>?
That should get you started :-)
这应该让你开始:-)
Totally missed the Jquery my bad
完全错过了 Jquery 我不好
回答by the_wizard
$('.showSingle').click(function () {
$('.targetDiv').hide();
$('#div' + $(this).attr('target')).show();
$('.showSingle').removeClass('selected')
$(this).addClass('selected');
});
var active_link = 1; // Change this value to set the active link
$('a[target='+active_link+']').trigger('click');?
回答by user1502531
For your first trouble you can add the following two lines to your click event:
对于您的第一个问题，您可以将以下两行添加到您的点击事件中：
$(".buttons .selected").removeClass("selected");
$(this).addClass("selected");
Or as Irrelepant says (a better way actually):
或者正如 Irrelepant 所说（实际上是更好的方法）：
$(this).addClass('selected').siblings().removeClass('selected');
