There are 4 buttons, when you click on which the contents will change (which is quite a lot, you probably shouldn’t write through .html. I know that you can do this through .show () and .hide (), but it turns out a lot of code, how best is a simple task to implement?

  • Too general. Details and code in the studio. - Duck Learns to Take Cover
  • tabs principle can be used: each button has its own data target. There will not be much code. examples can be found in the bootstrap or anywhere else - lexxl

1 answer 1

$('#buttons a').click(function () { var index = $(this).index(); $('#buttons a.active').removeClass('active'); $(this).addClass('active'); $('#content div.showed').removeClass('showed'); $('#content div').eq(index).addClass('showed'); }); 
 #buttons a { color: #111; display: block; float:left; padding: 5px 10px; border: 1px solid #aaa; margin-right: 5px; text-decoration: none; margin-bottom: 10px; transition: .15s ease-out; -webkit-transition: .15s ease-out; } #buttons a:hover, #buttons a.active { background: darkblue; border-color: darkblue; color: #fff; } #content { clear: both; background: #efefef; height: 35px; position: relative; } #content div { line-height: 35px; padding: 0 15px; opacity: 0; visibility: hidden; position: absolute; left: 0; top: 0; z-index: 1; transition: .15s ease-out; -webkit-transition: .15s ease-out; } #content div.showed { opacity: 1; visibility: visible; z-index: 2; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="buttons"> <a href="#" class="active">Кнопка 1</a> <a href="#">Кнопка 2</a> <a href="#">Кнопка 3</a> <a href="#">Кнопка 4</a> </div> <div id="content"> <div class="showed">Контент 1</div> <div>Контент 2</div> <div>Контент 3</div> <div>Контент 4</div> </div>