2

Имеем маркированный список и блоки разбросанные на странице. При клике на пункт списка открывается блок с выбранным классом, а другой становится не активным. В общем-то по коду все будет понятно.

Необходимо через localStoragе сделать проверку элементов с классом "active". Чтоб при перезагрузке страниц, результат выбранный пользователем сохранялся.

$(document).ready(function() {
  
    $(".sh-list li").click(function() {
      $(".sh-list li").removeClass("active");
      $(this).addClass("active");
    });

    $('.sh-list li').on('click',function(e) {
      $('.sh-cont').removeClass('active');
    });
  
    $('.sh-list li').on('click',function(e) {
      if ($(this).hasClass('b1')) {
        $('.sh-cont.b1').addClass('active');
      }
      else if($(this).hasClass('b2')) {
        $('.sh-cont.b2').addClass('active');
      }
      else if($(this).hasClass('b3')) {
        $('.sh-cont.b3').addClass('active');
      }
    });
  
});
.sh-list li {
  cursor: pointer;
}
.sh-list li.active {
  color: red;
}
.sh-cont {
  display: none;
}
.sh-cont.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="sh-list">
  <li class="b1 active">Block 1</li>
  <li class="b2">Block 2</li>
  <li class="b3">Block 3</li>
</ul>

<div class="sh-cont b1 active">text 1</div>
<div class="sh-cont b2">text 2</div>
<div class="sh-cont b3">text 3</div>

Буду благодарен за любую помощь!

1

2 ответа 2

2

В простом случае, если у элементов списка будет только один класс, можно по нему и определять выбранный, а также сохранять этот класс в localStorage и использовать его при загрузке

$(document).ready(function() {
  $(".sh-list li").click(function() {
    if ($(this).hasClass('active')) return;
    $(".sh-list li.active, .sh-cont.active").add('.' + this.className).toggleClass('active');
    //localStorage["selected"] = '.' + this.className;
  });
  /*
  if (localStorage["selected"]) {
    $(localStorage["selected"]).addClass('active');
  }
  */
});
.sh-list li {
  cursor: pointer;
}
.sh-list li.active {
  color: red;
}
.sh-cont {
  display: none;
}
.sh-cont.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="sh-list">
  <li class="b1 active">Block 1</li>
  <li class="b2">Block 2</li>
  <li class="b3">Block 3</li>
</ul>

<div class="sh-cont b1 active">text 1</div>
<div class="sh-cont b2">text 2</div>
<div class="sh-cont b3">text 3</div>

Но лучше убрать общую часть из класса, например в какой-нибудь data-* атрибут, например так

$(document).ready(function() {
  $(".sh-list li").click(function() {
    var $this=$(this);
    if ($this.hasClass('active')) return;
    $(".sh-list li.active, .sh-cont.active").add(`[data-item="${$this.data('item')}"]`)
                                            .toggleClass('active');
    //localStorage["selected"] = $this.data('item');
  });
  /*
  if (localStorage["selected"]) {
    $(`[data-item="${localStorage["selected"]}"]`).addClass('active');
  }
  */
});
.sh-list li {
  cursor: pointer;
}
.sh-list li.active {
  color: red;
}
.sh-cont {
  display: none;
}
.sh-cont.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="sh-list">
  <li data-item="b1" class="b1 active">Block 1</li>
  <li data-item="b2" class="b2">Block 2</li>
  <li data-item="b3" class="b3">Block 3</li>
</ul>

<div data-item="b1" class="sh-cont b1 active">text 1</div>
<div data-item="b2" class="sh-cont b2">text 2</div>
<div data-item="b3" class="sh-cont b3">text 3</div>

3
  • Интересные решения. Спасибо за помощь. Есть ли объективные причины заменить мой вариант одним из ваших? Голос все равно отдам за ваш пост. 10 сен 2016 в 7:57
  • 1
    @AlexeyGiryayev, стоит разобраться что происходит в моем коде и что в твоем. В итоге все сведется почти к одному и тому же
    – Grundy
    10 сен 2016 в 8:37
  • Вот и я смотрю, что результат один и тот же, просто разная подача. Еще раз спасибо за участие. 10 сен 2016 в 10:31
1

Решение нашлось. Даже в более удобном виде, исключив условия из скрипта и, конечно же, с подгрузкой данных после обновления страницы.

Тут можно потестировать: http://codepen.io/pen/VKvmrY

Сам скрипт:

$(document).ready(function() {
  $(".sh-list li").each(function(){
      $(this).click(function(){
        localStorage.selectedTab = $(this).index() + 1;
        tabeId = $(this).attr('id');
        $(".sh-list li").removeClass("active");
        $(this).addClass("active");
        $(".sh-cont").addClass("hide");
        $("#"+tabeId+"-1").removeClass("hide")   
        return false;     
      });
    });  

    if (localStorage.selectedTab) {
      $(".sh-list li:eq(" + (localStorage.selectedTab - 1) + ")").click();
    }
});

Немного подправлена разметка:

<ul class="sh-list">
  <li class="active" id="b1">Block 1</li>
  <li id="b2">Block 2</li>
  <li id="b3">Block 3</li>
</ul>

<div class="sh-cont" id="b1-1">text 1</div>
<div class="sh-cont" id="b2-1">text 2</div>
<div class="sh-cont" id="b3-1">text 3</div>

И стили:

.sh-list li {
  cursor: pointer;
}
.sh-list li.active {
  color: red;
}
.hide { display: none; }
2
  • а в чем смысл при сохранении добавлять 1 к индексу, а при загрузке вычитать?
    – Grundy
    10 сен 2016 в 7:04
  • .index() используйется для получения позиции элемента списка. И по умолчанию он возвращает 0 для первого пункта. Поэтому я добавляю единицу, чтоб результат их index возвращался не с 0,1,2,3... , а с 1,2,3... 10 сен 2016 в 7:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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