Onclick显示/隐藏多个div Jquery

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

以下是我需要能够做的事情：如果用户单击任何“选项”，我需要一个名为“选定的”的类，该类与导航中当前选定或选定的项相关联-这意味着向锚添加一个类。在下面的示例中，您将看到“selected”类的CSS样式

我也很难在加载时选择“选项1”或“选项2”，这样所有div都不会出现-加载时我只需要一个div就可以显示正确的“选项”“已选择””（如果有意义的话）

---

欢迎大家提出建议

您应该使用数据属性，因为仅仅

target

并不真正有效。我将其更改为

数据目标

，并执行了以下操作：

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

on（）

只能在jQuery 1.7+中工作，因此如果使用较旧版本的jQuery（您的小提琴是），请坚持使用

click（）。它从所有
.showsingSingle
锚中删除类“selected”，然后将类“selected”添加到单击的锚中。此外，它还通过隐藏所有
.targetDiv
s并仅显示第一个来处理onload问题

编辑：在页面加载时也应突出显示第一个红色选项
 编辑：对于非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'; 
          } 
     } 
}

这就是要在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>​


选择1
选择2
选择3
选择4
同侧氯1
同侧阴唇2
同侧阴唇3
同侧阴唇4​

这应该让你开始：-）

完全错过了Jquery my bad
对于第一个问题，您可以将以下两行添加到单击事件中：

$('.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');​

    $(".buttons .selected").removeClass("selected");
    $(this).addClass("selected"); 

或者正如Irelepant所说（实际上是更好的方法）：

这里有一个关于你建议的方法的提琴，再加上点击第一个元素就可以开始了：@dinjas-谢谢，我好像忘了保存提琴，只是发布了OP的提琴（尴尬）？
$(this).addClass('selected').siblings().removeClass('selected');