Показывать выбранные DIV, когда хешированные якоря находятся в URL - PullRequest
Новая
       22

Показывать выбранные DIV, когда хешированные якоря находятся в URL

0 голосов
/ 07 марта 2019

Я хотел бы условно показать div, когда отображается только конкретная ссылка на ссылку (myurl.com/#about).У меня установлен .dynamic-content для отображения: нет в моем CSS.# default-content показывает, так что я знаю, что я близко, но я новичок в этом уровне сценариев.Какой лучший способ заставить это работать?Спасибо! 

(function($) {
  // Parse the URL parameter
  function getParameterByName(name, url) {
    if (!url) {
      url = location.href.split("#").slice(-1)[0];
    }

    return url;

  }
  // Give the parameter a variable name
  var dynamicContent = getParameterByName('#');

  $(document).ready(function() {

    // Check if the URL parameter is about
    if (dynamicContent == 'about') {
      $('#about').show();
    }
    // Check if the URL parameter is expertise
    else if (dynamicContent == 'expertise') {
      $('#expertise').show();
    }
    // Check if the URL parameter is contact
    else if (dynamicContent == 'contact') {
      $('#contact').show();
    }
    // Check if the URL parmeter is empty or not defined, display default content
    else {
      $('#default-content').show();
    }
  });
})(jQuery);
  <div id="default-content" class="dynamic-content">
    This is the default content
  </div>
  <!-- Dynamic Section 1 -->
  <div id="contact" class="dynamic-content">
    Contact content
  </div>
  <!-- Dynamic Section 2 -->
  <div id="expertise" class="dynamic-content">
    Expertise content
  </div>
  <!-- Dynamic Section 3 -->
  <div id="about" class="dynamic-content">
    About content
  </div>

Ответы [ 2 ]

1 голос
/ 07 марта 2019

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

$(document).ready(function() {
  var contentByHash = {
    about: '#about'
    , expertise: '#expertise'
    , contact: '#contact'
  };
  var hash = window.location.hash.slice(1);

  $(contentByHash[hash] || '#default-content').show();
});
1 голос
/ 07 марта 2019

Вы, безусловно, можете использовать этот метод, который предложил Taplar, или вы можете отказаться от него и использовать css только с: target псевдоселектором См. Приемы css здесь

По сути, вы будете скрывать свои разделы, как вы уже делаете, а затем добавляете класс с display: block вот так 

#contact:target {
    display: block;
}

Правда, показ содержимого по умолчанию немного сложнее. Вы можете проверить наличие значения в хэше и показать содержимое по умолчанию, если его нет. Я посмотрю на это и вернусь к вам

Редактировать: Проверить на этот вопрос принял ответ с помощью псевдо-селекторов

Вот ссылка на этот вопрос

Возможно, вы могли бы сделать что-то похожее на это: 

/* based on/6990315/css-selektor-kogda-tsel-pusta */
.section-wrapper>.dynamic-content:target~#default-content,
.section-wrapper>.dynamic-content {
  display: none;
}

.dynamic-content>#default-content,
.dynamic-content>.dynamic-content:target {
  display: block;
}
<div class="section-wrapper">
  <div id="default-content" class="dynamic-content">
    This is the default content
  </div>
  <!-- Dynamic Section 1 -->
  <div id="contact" class="dynamic-content">
    Contact content
  </div>
  <!-- Dynamic Section 2 -->
  <div id="expertise" class="dynamic-content">
    Expertise content
  </div>
  <!-- Dynamic Section 3 -->
  <div id="about" class="dynamic-content">
    About content
  </div>
  <!-- Dynamic Section 3 -->
</div>

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

...