有没有办法用 Jquery 显示 2 个具有相同 ID 和类 onClick 的 Div,无法解决这个问题。 (Div1/类 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>
J查询:
$('.showSingle').on('click', function () {
$(this).addClass('selected').siblings().removeClass('selected');
$('.targetDiv').hide();
$('#div' + $(this).data('target')).show();
});
$('.showSingle').first().click();
fiddle : https://jsfiddle.net/XwN2L/5709/
非常感谢您的帮助!
最佳答案
在一个页面上不可能出现多次 ID。
ID = 标识符
如果您希望能够“绑定(bind)”页面上元素的可见性,您可以使用具有相同值的数据属性。
例如:
<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();
});
关于javascript - 显示 2 个具有相同 ID 和 Class onClick 的 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29356457/