Hello, such a problem, I just want to highlight the selected menu item by clicking, so that the user can see which section he is in, the highlighting works with jquery, but now the links leading to different categories do not work: the code below. Snippet inserted below, inserted the very picture that the block is highlighted, but the links do not work, help me fix the script please. I do everything on .Net Mvc

var classHighlight = 'highlight'; var $thumbs = $('.menu_block').click(function(e) { e.preventDefault(); $thumbs.removeClass(classHighlight); //add the class to the currently clicked element (this) $(this).addClass(classHighlight); }); 
 @media screen and (min-width: 1024px) { div.menu { margin: 0 auto; width: 1024px; height: 80px; } .list_menu { list-style-type: none; margin-top: 0; padding-left: 0; } div.menu_block { width: 146px; height: 66px; text-align: center; margin-top: 7px; border-right-color: #562E07; border-right-style: solid; border-right-width: 1px; font: 15px Arial, sans-serif; } .highlight { background-color: cyan; } div.menu_block:hover { background-color: #d19e6a; opacity: .8; cursor: hand; cursor: pointer; font-weight: bold; } div.menu_block:hover img {} .list_menu li { float: left; width: 146px; height: 80px; border-radius: 3px; } .list_menu li a { width: 100%; height: 100%; top: 0; left: 0; text-decoration: none; /* Makes sure the link doesn't get underlined */ z-index: 10; /* raises anchor tag above everything else in div */ background-color: none; color: black; /*workaround to make clickable in IE */ opacity: 0; /*workaround to make clickable in IE */ filter: alpha(opacity=0); /*workaround to make clickable in IE */ } .list_menu li a img { width: 37px; height: 33px; } .list_menu img { margin-bottom: 10px; } .hr { width: 100%; height: 3px; background: #926E49; position: relative; top: -3px; margin-bottom: 20px; } } @media screen and (min-width: 430px) and (max-width: 1023px) { .menu { width: 100%; height: 80px; } .list_menu { list-style-type: none; margin-top: 0; padding-left: 0; } .menu_block {} .list_menu li { float: left; width: 14%; height: 80px; border-radius: 3px; font: 15px Arial, sans-serif; box-sizing: content-box; text-align: center; } .list_menu li a { width: 100%; height: 100%; top: 0; left: 0; text-decoration: none; /* Makes sure the link doesn't get underlined */ z-index: 10; /* raises anchor tag above everything else in div */ background-color: white; /*workaround to make clickable in IE */ opacity: 0; /*workaround to make clickable in IE */ filter: alpha(opacity=0); /*workaround to make clickable in IE */ } .list_menu li img { width: 37px; height: 33px; } .list_menu img { margin-bottom: 10px; } .hr { width: 100%; height: 3px; background: #926E49; position: relative; top: -3px; margin-bottom: 20px; } } @media screen and (min-width: 200px) and (max-width: 429px) { .menu { width: 100%; height: 270px; } .list_menu { list-style-type: none; margin-top: 0; padding-left: 0; } .list_menu li a { width: 100%; height: 100%; top: 0; left: 0; text-decoration: none; /* Makes sure the link doesn't get underlined */ z-index: 10; /* raises anchor tag above everything else in div */ background-color: white; /*workaround to make clickable in IE */ opacity: 0; /*workaround to make clickable in IE */ filter: alpha(opacity=0); /*workaround to make clickable in IE */ } .menu_block {} .list_menu li { float: left; width: 100%; height: 30px; border-radius: 3px; padding-top: 7px; font: 15px Arial, sans-serif; text-align: center; } .list_menu li a img { width: 37px; height: 33px; display: none; } br { display: none; } .hr { width: 100%; height: 3px; background: #926E49; position: relative; top: -3px; margin-bottom: 20px; } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="menu"> <ul class="list_menu"> <li> <a class="test" href="/Furniture/List"> <div class="menu_block"> <img src="~/Content/img/img0008.png" alt=""> <br>Всі</div> </a> </li> <li> <a href="/Furniture/List?category=%D0%9A%D0%BE%D0%BC%D0%BE%D0%B4%D0%B8&amp;page=1"> <div class="menu_block"> <img src="~/Content/img/img0009.png" alt=""> <br>Комоди</div> </a> </li> </ul> </div>

Cartridge menu

  • one
    This is the line e.preventDefault (); cancels the link. - Mikhail Vaysman

1 answer 1

 var classHighlight = 'highlight'; $('li').click(function(e) { $('li').removeClass(classHighlight); //add the class to the currently clicked element (this) $(this).addClass(classHighlight); }); 
 li { outline: 2px solid red; } .highlight { background-color: cyan; } @media screen and (min-width: 1024px) { div.menu { margin: 0 auto; width: 1024px; height: 80px; } .list_menu { list-style-type: none; margin-top: 0; padding-left: 0; } div.menu_block { width: 146px; height: 66px; text-align: center; margin-top: 7px; border-right-color: #562E07; border-right-style: solid; border-right-width: 1px; font: 15px Arial, sans-serif; } .highlight { background-color: cyan; } div.menu_block:hover { background-color: #d19e6a; opacity: .8; cursor: hand; cursor: pointer; font-weight: bold; } div.menu_block:hover img {} .list_menu li { float: left; width: 146px; height: 80px; border-radius: 3px; } .list_menu li a { width: 100%; height: 100%; top: 0; left: 0; text-decoration: none; /* Makes sure the link doesn't get underlined */ z-index: 10; /* raises anchor tag above everything else in div */ background-color: none; color: black; /*workaround to make clickable in IE */ opacity: 0; /*workaround to make clickable in IE */ filter: alpha(opacity=0); /*workaround to make clickable in IE */ } .list_menu li a img { width: 37px; height: 33px; } .list_menu img { margin-bottom: 10px; } .hr { width: 100%; height: 3px; background: #926E49; position: relative; top: -3px; margin-bottom: 20px; } } @media screen and (min-width: 430px) and (max-width: 1023px) { .menu { width: 100%; height: 80px; } .list_menu { list-style-type: none; margin-top: 0; padding-left: 0; } .menu_block {} .list_menu li { float: left; width: 14%; height: 80px; border-radius: 3px; font: 15px Arial, sans-serif; box-sizing: content-box; text-align: center; } .list_menu li a { width: 100%; height: 100%; top: 0; left: 0; text-decoration: none; /* Makes sure the link doesn't get underlined */ z-index: 10; /* raises anchor tag above everything else in div */ background-color: white; /*workaround to make clickable in IE */ opacity: 0; /*workaround to make clickable in IE */ filter: alpha(opacity=0); /*workaround to make clickable in IE */ } .list_menu li img { width: 37px; height: 33px; } .list_menu img { margin-bottom: 10px; } .hr { width: 100%; height: 3px; background: #926E49; position: relative; top: -3px; margin-bottom: 20px; } } @media screen and (min-width: 200px) and (max-width: 429px) { .menu { width: 100%; height: 270px; } .list_menu { list-style-type: none; margin-top: 0; padding-left: 0; } .list_menu li a { width: 100%; height: 100%; top: 0; left: 0; text-decoration: none; /* Makes sure the link doesn't get underlined */ z-index: 10; /* raises anchor tag above everything else in div */ background-color: white; /*workaround to make clickable in IE */ opacity: 0; /*workaround to make clickable in IE */ filter: alpha(opacity=0); /*workaround to make clickable in IE */ } .menu_block {} .list_menu li { float: left; width: 100%; height: 30px; border-radius: 3px; padding-top: 7px; font: 15px Arial, sans-serif; text-align: center; } .list_menu li a img { width: 37px; height: 33px; display: none; } br { display: none; } .hr { width: 100%; height: 3px; background: #926E49; position: relative; top: -3px; margin-bottom: 20px; } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="menu"> <ul class="list_menu"> <li> <a class="test" href="#"> <div class="menu_block"> <img src="http://s1.iconbird.com/ico/2014/1/633/w512h5121390857008food512.png" alt=""> <br>Все</div> </a> </li> <li> <a href="#"> <div class="menu_block"> <img src="https://maxcdn.icons8.com/Android/PNG/512/Household/kitchen-512.png" alt=""> <br>Комоды</div> </a> </li> </ul> </div>

  • Thank you of course, but I have some joke that as soon as you click that color appears and immediately disappears, I have a suspicion that div.list_menu: hover is interfering, I just made it to glow on the mouse, too, could you see - M-Misha-M
  • In fact, it only highlights when you click on the block 2 times: / - M-Misha-M
  • @ M-Misha-M all disappears, because the link is working ... - C.Raf.T
  • @ M-Misha-M did not let it go ... - C.Raf.T
  • excuse me, I don’t understand what is changing, it still disappears, what parameter is responsible for this? I just need to keep the backlight state after the click - M-Misha-M