1

Здравствуйте, такая проблема, хочу просто подсветить выбранный пункт меню по щелчку, чтобы пользователь видел в каком разделе он находиться, подсветка с помощью jquery работает, но теперь ссылки ведущие на разные категории не работают: код ниже. Сниппет вставил ниже, вставил саму фотку что блок подсвечивается, но ссылки не работают, помогите исправить скрипт пожалуйста. Делаю всё на .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>

Картника меню

1
  • 1
    Вот эта строчка e.preventDefault(); отменяет переход по ссылке. 30 дек 2016 в 17:30

1 ответ 1

0

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>

12
  • спасибо вам конечно , но у меня какой то прикол что как только кликаешь то цвет появляется и сразу пропадает, у меня подозрение на то что мешает div.list_menu:hover , я просто сделал чтобы по наводке мышки оно тоже светилось, не могли бы вы посмотреть
    – M-Misha-M
    30 дек 2016 в 17:42
  • По сути оно подсвечивает только когда 2 раза кликаешь на блок :/
    – M-Misha-M
    30 дек 2016 в 17:44
  • @M-Misha-M все исчезает, потомучто линк срабатывает...
    – C.Raf.T
    30 дек 2016 в 17:44
  • @M-Misha-M сделал чтобы не пропадало...
    – C.Raf.T
    30 дек 2016 в 17:47
  • извините не понимаю что меняется , у меня по прежнему пропадает, какой параметр за это отвечает? Просто мне нужно чтобы после клика сохранялось состояние подсветки
    – M-Misha-M
    30 дек 2016 в 17:57

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.