Question

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

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

View current progress

我也无法尝试选择“选项1”或“选项2”，以便所有div都不显示 - Onload我只需要一个div来显示正确的“选项“”选择“如果有意义的话。

欢迎所有建议！

Answer 1

您应该使用数据属性，因为只有target才真正有效。我将其更改为data-target并执行了：

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

FIDDLE

on()只能在jQuery 1.7+中使用，所以如果使用旧版本的jQuery（你的小提琴），请坚持使用click()。

Answer 2

见http://jsfiddle.net/XwN2L/415/。它从所有.showSingle个锚中删除“selected”类，然后将“selected”类添加到单击的锚点。此外，它通过隐藏所有.targetDiv并仅显示第一个来处理onload问题。

编辑：也应在页面加载时突出显示红色的第一个选项。 http://jsfiddle.net/XwN2L/421/

Answer 3

对于非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>

这应该让你开始： - ）

完全错过了Jquery我的不好

Answer 4

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

Answer 5

如果您遇到第一个问题，可以在点击事件中添加以下两行：

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

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

$(this).addClass('selected').siblings().removeClass('selected');

Onclick显示/隐藏多个Divs Jquery

5 个答案: