有没有办法用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/

非常感谢你的帮助!

#1楼 票数:0

一页上出现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();
});

  ask by user3599221 translate from so

未解决问题?本站智能推荐:

2回复

具有相同ID的元素逐渐消失

我在使用此代码时遇到麻烦。 应该这样做: 单击具有“ portfolioImage”类的元素以启动该功能。 淡出“ image”类的所有元素。 淡入具有类“ image”和“ portfolioImage”的id的元素(可以说PortfolioImage的id为3,因此淡入具
5回复

JavaScript按钮。-添加/删除onClick的类/id样式。-显示:无/阻止

我试图做到这一点,所以当您单击按钮时: 按钮和标题被删除; 显示隐藏的内容。 然后,隐藏的内容具有后退按钮。 单击后,它将还原所有更改。 下面的JavaScript代码不起作用,但是应该可以让您大致了解我要实现的目标。 我不确定如何同时联系这两个ID /类,因为我需要两者
3回复

在JQuery中选择具有相同类的特定元素

我正在尝试使用彼此位于顶部的两个div创建一个选择状态。 一个相对放置,一个绝对放置在-200px的底部位置。 单击相对div时,绝对定位的div将滑入并显示“成功”消息。 我现在有这项工作,但是如果用户决定要更改选择,则需要删除“成功” div,以进行更深入的介绍。 现在,当我单击一
2回复

css盘旋在onclick会话上

我想知道是否有人可以帮助我。 我正在尝试创建一个简单的作品集网站,并且我在顶部导航中有这个链接,当点击时会在标题下面出现一个水平菜单。 到目前为止,我已经让它与css一起工作了,但是我不喜欢菜单在悬停时如何显示,如果它在点击时出现并保持在那里直到你再次点击相同的链接,它看起来会更专业。 如
1回复

对不同的图像重复onclick功能

我正在制作图像幻灯片,它实际上是一个润饰画廊。 这个想法是,当您单击图像时,它会切换到另一图像。 因此显示之前/之后。 我使用了onclick函数,该函数在第一张图片上达到了这种效果。 但是,当我为第二张图像重复该功能时,它不起作用。 我对Javascript的了解不是那么强,所以
2回复

div上的onclick事件没有触发

我有一个图像+文本滑块与最近的博客文章循环通过最近的帖子,而一个游客一直看着某个页面。 您可以在http://jsfiddle.net/GsgPM/16/上看到所有代码。它是关于大图像+文本滑块,它不会触发。 该事件确实触发了粉红色按钮。 真的不为我计算......为什么它适用于那个,而
1回复

onclick:更改位置后做点什么

假设我要执行以下操作:单击“ div”时,更改到另一个位置(好像是...),然后执行一些操作。 我已经尝试使用此代码: <div onclick="location.reload();location.href='...';togglebox('#ident')">Title&l
1回复

从其他div的onClick更改悬停按钮类

当鼠标悬停在CSS上时,该按钮会将“ TE LAAT”更改为“ NU BETALEN”,就像一个超级按钮一样。 现在,我希望仅在单击“可折叠标头” div时更改“ TE LAAT”文本。 因此,当该div变为活动状态时(我现在添加了该类,但是单击该活动类时会进行切换。)按钮中的文本变为NU