There is a code - a slider on the Tiny Carousel library, in which all the links (namely: "Website Development", "Contextual Advertising", "Advertising in social networks") are from border-bottom . Is it possible to make it so that on the active tab (link) there is no border-bottom ?

 .ssilka { width: 235px; height: 24px; text-align: center; float: left; font-weight: bold; margin: 25px 20px 0 60px; font-family: proximabold; font-size: 1.8em; color: #2b2a2a !important; border-bottom: 4px dashed #d3d3d3; } 
 <style> #slider1 { height: 90%; overflow: hidden; padding: 0 0 10px; } #slider1 .viewport { width: 947px; height: 386px; margin: 80px 40px; } #slider1 .overview li { height: 386px; width: 947px; border: medium none; } #slider1 .overview li > img { float: left; margin: 0 20px 0 0; padding: 1px; height: 386px !important; width: 947px !important; } </style> <div class="ssilka"><a href="#" id="gotoslide1">Разработка сайтов</a></div> <div class="ssilka"><a href="#" id="gotoslide2">Контекстная реклама</a></div> <div class="ssilka"><a href="#" id="gotoslide3">Реклама в соц. сетях</a></div> <div id="slider1"> <div class="viewport"> <ul class="overview"> <li> <img src="/123.jpg" /> </li> <li> <img src="/222.jpg" /> </li> <li> <img src="/321.jpg" /> </li> </ul> </div> </div>

    3 answers 3

    To apply any additional styles to the active link, you need this link to receive some class when it is active, but judging by your code, this does not happen, so you can add the active class to the active link using jquery :

     $(document).ready(function() { $('body').on('click', '.ssilka', function(){ $('.ssilka').removeClass('active'); $(this).addClass('active'); }); });

    and using css add a rule to remove the border from the active link:

     .ssilka.active { border: 0; }

    And below is a cumulative example with your styles, only for links:

     $(document).ready(function() { $('body').on('click', '.ssilka', function() { $('.ssilka').removeClass('active'); $(this).addClass('active'); }); }); 
      .ssilka { width: 235px; height: 24px; text-align: center; float: left; font-weight: bold; margin: 25px 20px 0 60px; font-family: proximabold; font-size: 20px; color: #2b2a2a !important; border-bottom: 4px dashed #d3d3d3; text-decoration: none; } .ssilka.active { border: 0; } .ssilka a { text-decoration: none; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ssilka active"><a href="#" id="gotoslide1">Разработка сайтов</a> </div> <div class="ssilka"><a href="#" id="gotoslide2">Контекстная реклама</a> </div> <div class="ssilka"><a href="#" id="gotoslide3">Реклама в соц. сетях</a>

    • Thanks for the detailed answer, but for some reason it does not work, now when I click on the link, the page jumps to the very beginning, as if I had anchored to it. Maybe a library conflict or something else? - Valery Emelyanov

    You can add the following rule on the active link

      text-decoration: none

      In general, I thought that they were doing the opposite when hovering. But still:

       .ssilka:active //это активная { border-bottom: 0; } .ssilka a:active { text-decoration: none; }