Good day! These are tabs. When you click on one <div id="1" class="tabs">1</div> block, the class with .tabs-selected assigned to the block with id1 . And our blocks are duplicated. Help, please, make sure that when you click on one block, a class is assigned at once to two blocks that have the same id . Thanks for the help!

 $(document).ready(function() { $('.tabs').bind('click', function() { $('.content').hide(); $('#' + $(this).attr('id') + '-content').show(); $('.tabs').removeClass('tabs-selected'); $(this).addClass('tabs-selected'); }); }); 
 .page { width: 500px; } .tabs { width: 124px; float: left; background: green; cursor: pointer; } .tabs-selected { background: #000; color: #fff; } .content { width: 500px; float: left; background: #ff0000; display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="page"> <div id="1" class="tabs">1</div> <div id="2" class="tabs">2</div> <div id="3" class="tabs">3</div> <div id="4" class="tabs">4</div> <div id="1" class="tabs">1</div> <div id="2" class="tabs">2</div> <div id="3" class="tabs">3</div> <div id="4" class="tabs">4</div> <div id="1-content" class="content">Текст 1</div> <div id="2-content" class="content">Текст 2</div> <div id="3-content" class="content">Текст 3</div> <div id="4-content" class="content">Текст 4</div> </div>

  • 2
    use class instead of id - Grundy
  • Thank you all for the help !!! - LADYX
  • one
    two identical id on one page is a bad practice, use attributes. For jQuery this is attr(a,b) - Dmitry Chistik
  • Got it, thanks for the tip! - LADYX

2 answers 2

Cannot duplicate ids. It is better to replace them with the data-id attribute to work through it. Here is a sketched code:

 $(document).ready(function(){ $('.tabs').on('click', function() { var $me = $(this); var id = $me.data("id"); $('.content').hide(); $('.content[data-id = ' + id + '-content]').show(); $('.tabs.tabs-selected').removeClass('tabs-selected'); $('.tabs[data-id=' + id + ']').addClass('tabs-selected'); }); });

An example .

  • easier then classes - Grundy
  • It is possible and classes. For me - not easier and not more difficult - user200141
  • Thank you all for the help !!! - LADYX
  • Yes, I forgot to ask. Tell me, please, will this whole construction work in all browsers? Thank! - LADYX
  • one
    @LADYX: Yes, it is cross-browser. - user200141

This should not be done

but with the [id="ваш_id"] selector you can access elements with the same ID.

Here is an example:

 $(document).ready(function() { $('.tabs').bind('click', function() { $('.content').hide(); $('#' + $(this).attr('id') + '-content').show(); $('.tabs').removeClass('tabs-selected'); $('[id=' + $(this).attr('id') + ']').addClass('tabs-selected'); }); }); 
 .page { width: 500px; } .tabs { width: 124px; float: left; background: green; cursor: pointer; } .tabs-selected { background: #000; color: #fff; } .content { width: 500px; float: left; background: #ff0000; display: none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="page"> <div id="1" class="tabs">1</div> <div id="2" class="tabs">2</div> <div id="3" class="tabs">3</div> <div id="4" class="tabs">4</div> <div id="1" class="tabs">1</div> <div id="2" class="tabs">2</div> <div id="3" class="tabs">3</div> <div id="4" class="tabs">4</div> <div id="1-content" class="content">Текст 1</div> <div id="2-content" class="content">Текст 2</div> <div id="3-content" class="content">Текст 3</div> <div id="4-content" class="content">Текст 4</div> </div>

So do not follow. Listen to @Grundy and @Olegor Degtev.

  • Thank you all for the help !!! - LADYX
  • Yes, I forgot to ask. Tell me, please, will this whole construction work in all browsers? Thank! - LADYX
  • @LADYX By all you understand what version? - VenZell
  • All, if only it does not count the times of the donkey as a six, i.e. obsolete browsers. - LADYX
  • one
    @LADYX, compatibility is the same as in Oleg Degtev's response. I left my answer for clarity, as an example of the fact that even in this case you can choose the same elements. - VenZell