Onclick显示/隐藏多个Divs Jquery [英] Onclick Show / Hide Multiple Divs Jquery

问题描述

我需要创建显示/隐藏多个div的导航。

I need to create navigation that shows / hides multiple divs.

这里是我需要做的：如果用户点击了任何选项 我需要一个名为 selected 的类与nav中的当前选定或选择的项目相关联 - 这意味着向锚点添加一个类。您将在下面的示例中看到类selected中有CSS样式。

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.

查看当前进度

我也在尝试选择选项1或选项2所以所有的div不出现 - Onload我只需要一个div出现正确的选项选择如果这是有道理的。

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.

欢迎所有建议！

推荐答案

您应该使用数据属性，因为 target is'nt真的有效。我将其更改为 data-target 并且：

You should use data attributes, as just target is'nt really valid. I changed it to data-target and did:

$('.showSingle').on('click', function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $('.targetDiv').hide();
    $('#div' + $(this).data('target')).show();
});​

FIDDLE

on（）只能在jQuery 1.7+使用旧版本的jQuery（你的小提琴），坚持 click（）。

on() will only work in jQuery 1.7+, so if using an older version of jQuery (your fiddle is), stick with click().

这篇关于Onclick显示/隐藏多个Divs Jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！