Hello. Now the script works for all elements, i.e. they scroll through the top and bottom. Tell me pliz how to make them work separately?

$("div.menu a").click(function(){ $("div.slides").css({"left":-100*$(this).index()+"%"}); }); 
 div.menu{display:block;margin:0px 0px 20px 0px;} div.menu a{display:inline-block;margin-right:20px;} div.main{width:856px;height:360px;background:#ebebeb;overflow:hidden;box-shadow:0px 0px 20px rgba(0,0,0,.5);position:relative;} div.main div.slides{display:block;width:100%;height:100%;white-space:nowrap;position:absolute;transition:all .5s;left:0%;} div.main div.slides div{font-size:100px;width:100%;height:100%;display:inline-block;text-align:center;} div.main div.slides div:nth-child(1){background:#ff1100;} div.main div.slides div:nth-child(2){background:#ffff11;} div.main div.slides div:nth-child(3){background:#11ff11;} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="menu"> <a href="#">first</a><a href="#">second</a><a href="#">third</a> </div> <div class="main"> <div class="slides"> <div>first</div><div>second</div><div>third</div> </div> </div> <br> <hr> <br> <div class="menu"> <a href="#">first</a><a href="#">second</a><a href="#">third</a> </div> <div class="main"> <div class="slides"> <div>first</div><div>second</div><div>third</div> </div> </div>

  • one
    use the jquery closest() , parent() and find() methods. SO already had a similar question - ArchDemon

1 answer 1

Example

 $('.menu').on('click', '.menu-link:not(.current)', function(e) { e.preventDefault(); $(this).addClass('current').siblings().removeClass('current') .parents('.tabs-container').find('div.slides').css({ "left": -100 * $(this).index() + "%" }); }); 
 div.menu { display: block; margin: 0px 0px 20px 0px; } div.menu a { display: inline-block; margin-right: 20px; } div.main { width: 856px; height: 360px; background: #ebebeb; overflow: hidden; box-shadow: 0px 0px 20px rgba(0, 0, 0, .5); position: relative; } div.main div.slides { display: block; width: 100%; height: 100%; white-space: nowrap; position: absolute; transition: all .5s; left: 0%; } div.main div.slides div { font-size: 100px; width: 100%; height: 100%; display: inline-block; text-align: center; } div.main div.slides div:nth-child(1) { background: #ff1100; } div.main div.slides div:nth-child(2) { background: #ffff11; } div.main div.slides div:nth-child(3) { background: #11ff11; } .current { background: #ccc; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="tabs-container"> <div class="menu"> <a href="#" class="menu-link current">first</a><a href="#" class="menu-link">second</a><a href="#" class="menu-link">third</a> </div> <div class="main"> <div class="slides"> <div>first</div> <div>second</div> <div>third</div> </div> </div> </div> <br> <hr> <br> <div class="tabs-container"> <div class="menu"> <a href="#" class="menu-link current">first</a><a href="#" class="menu-link">second</a><a href="#" class="menu-link">third</a> </div> <div class="main"> <div class="slides"> <div>first</div> <div>second</div> <div>third</div> </div> </div> </div>

  • thank you kind man) - Rick Hangover