Функция Javascript для добавления класса в элемент списка на основе # в URL

Question

Я пытаюсь создать функцию javascript для добавления и удаления класса в элемент списка на основе тега # в конце URL-адреса на странице. Страница имеет несколько разных состояний, каждое с разными # в URL.

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

<script type="text/javascript">

var hash=location.hash.substring(1);

if (hash == 'strategy'){
document.getElementById('strategy_link').style.backgroundPosition ="-50px";
}
if (hash == 'branding'){
document.getElementById('branding_link').style.backgroundPosition ="-50px";
}
if (hash == 'marketing'){
document.getElementById('marketing_link').style.backgroundPosition ="-50px";
}
if (hash == 'media'){
document.getElementById('media_link').style.backgroundPosition ="-50px";
 }
if (hash == 'management'){
document.getElementById('mangement_link').style.backgroundPosition ="-50px";
}

if (hash == ''){
document.getElementById('shop1').style.display ="block";
}

</script>

Кроме того, я использую функцию для изменения класса элемента onClick, но когда пользователь попадает на конкретный # на странице непосредственно с другой страницы и затем щелкает в другом месте, появляются два элемента.

<script type="text/javascript">
 function selectInList(obj)
{
    $("#circularMenu").children("li").removeClass("highlight");
    $(obj).addClass("highlight");
}
</script>

Вы можете увидеть это здесь: http://www.perksconsulting.com/dev/capabilities.php#branding

.

Извините за отсутствие ясности. Вопрос заключается в том, как изменить указанную вначале функцию, добавив и удалив класс: highlight, из элементов, основанных на хэше в URL, а не на щелчке, как это происходит в настоящее время. Я понимаю, что я изменяю стиль элемента, встроенного в мою текущую функцию, я бы изменил класс, а не стиль.

Спасибо.

Answer 1

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

var hash=location.hash.substring(1); 

$('#' + hash + '_link').addClass('highlight');

if (hash == ''){ 
  $('#shop1').show()
} 

Отредактировано (относительно вашего комментария)

Вот что я бы сделал:

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

function highlightCircularMenuIcon(hashValue) {
  if (hashValue.length) {
    $('#circularMenu li').removeClass('highlight');
    $('#' + hash + '_link').addClass('highlight');
  } else {
    //default action you did have $('#shop1').show();
  }
}

Во-вторых, когда документ готов (или загружен), свяжите событие click для каждого из элементов LI в циркулярном меню. Затем в функции щелчка вызвать highlightCircularMenuIcon. Наконец, в последней части document.ready вызовите функцию highlightCircularMenuIcon со строкой хеша из вашего URI.

$(document).ready(function () {
  $('#circularMenu li').click(function() {
    highlightCircularMenuIcon(($(this).name).replace("_link", ""));
  });

  highlightCircularMenuIcon(location.hash.substring(1)); 
});