显示2个具有相同ID和Class onClick的Divs

Question

有没有办法用Jquery显示具有相同id和class onClick的2个Divs，无法解决此问题。 （Div1 / Class targetDiv）

HTML：

<div class="buttons">
    <a  class="showSingle" data-target="1">Option 1</a> //With this
    <a  class="showSingle" data-target="2">Option 2</a>
    <a  class="showSingle" data-target="3">Option 3</a>
    <a  class="showSingle" data-target="4">Option 4</a>
</div>

<div id="div1" class="targetDiv">Lorum Ipsum 1</div> //Show this
<div id="div1" class="targetDiv">Lorum Ipsum 1 Second</div> //And this
<div id="div2" class="targetDiv">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv">Lorum Ipsum 4</div>

jQuery：

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

小提琴： https : //jsfiddle.net/XwN2L/5709/

非常感谢你的帮助！

Answer 1

一页上出现ID的次数不能超过一次。

ID =标识符

如果希望“绑定”页面上元素的可见性，则可以使用具有相同值的数据属性。

例如：

<div class="links">
    <a href="#group-1">Group 1</a>
    <a href="#group-2">Group 2</a>
    <a href="#group-3">Group 3</a>
  </div>

  <div class="some-class" data-id="group-1"></div>
  <div class="some-class" data-id="group-1"></div>
  <div class="some-class" data-id="group-2"></div>
  <div class="some-class" data-id="group-3"></div>
  <div class="some-class" data-id="group-2"></div>

然后：

var $links = $( '.links' ).find( 'a' );

$links.on( 'click', function ( e ) {
    e.preventDefault();

  var group = $( this ).attr( 'href' ).replace( '#', '' );

  $( '.some-class' ).hide();
  $( '.some-class[data-id="' + group + '"]' ).show();
});