Onclick显示/隐藏多个div jquery

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

以下是我需要能够做到：如果用户点击任何“选项”我需要一个名为“选择”关联到当前选择的或在所选择的项目类nav - 这意味着将一个类添加到锚点。在下面的示例中，您将看到CSS类型为“selected”类。

我也有麻烦试图要么“选项1”或“选项2”已选定的onload，使所有的div都没有出现 - 的Onload我只需要一个DIV与出现正确的“选项”“选择”如果这是有道理的。

欢迎任何建议！

2012-08-23 Filth

您应该使用数据属性，因为只有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()。

来源

2012-08-23 00:30:46 adeneo

下面是用小提琴你建议的方法，再加上点击第一个元素，以开始工作：http://jsfiddle.net/XwN2L/420/ – dinjas

@dinjas - 谢谢，似乎我忘了保存小提琴，只是发布OP的小提琴（尴尬）？ – adeneo

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

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

来源

2012-08-23 00:30:48 irrelephant

编辑：对于非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我的坏

来源

2012-08-23 00:32:43

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

来源

2012-08-23 00:41:39

对于你的第一个麻烦，你可以将以下两行添加到您的单击事件：

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

或者像Irrelepant说（实际上是一个更好的办法）：

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

来源

2012-08-23 01:10:33 user1502531

Onclick显示/隐藏多个div jquery

回答

相关问题