Использование Jquery для добавления / удаления класса на основе идентификатора тела

Question

Я не являюсь мастером javascript, но мне нужно создать скрипт, который выполняет следующее.

Если body id = "index", добавить класс "current-selected" в тег привязки, где href = index.php Если body id = "services", добавьте class = "current-selected" в тег привязки, где href = services.php и т.д.

Имеет ли это какой-то смысл? Кто-нибудь может помочь?

Спасибо, если сможешь!

Abbotsford Web Design

Answer 1

Нечто подобное должно сработать. Это будет динамически определять ваш идентификатор элемента тела и изменять все теги привязки, которые ссылаются на файл php с тем же именем.

var bodyID = $("body").attr("id");

$("a[href='" + bodyID + ".php']").addClass("current-selected");

Как отмечено в другом комментарии, используйте функцию .removeClass("current-selected"), чтобы выполнить обратное.

Кроме того, если ваш URL только оканчивается на «index.php», то есть атрибут href имеет вид «/something/index.php», используйте «a[href$='" + bodyID + ".php']» в качестве селектора. Это будет соответствовать href значениям, которые заканчиваются именем файла.

Answer 2

Построение на Использование Jquery для добавления / удаления класса на основе идентификатора тела :

var bodyID = $('body').attr('id');

$("a[href$='" + bodyID + ".php']").toggleClass('current-selected'); //add/remove

OR

$("a[href$='" + bodyID + ".php']").addClass('current-selected'); //add

Вместо «=» мы используем синтаксис «$ =» (ссылающийся на «href $ =»), который будет соответствовать концу строки, поэтому и «index.php», и «/index.php» будут соответствует "index.php".

Чтобы реализовать его на своем сайте, вам нужно запустить приведенный выше код внутри функции готовности jQuery, чтобы весь HTML ниже блока скрипта загружался до того, как Javascript выполнит над ним действия:

РЕДАКТИРОВАТЬ: Это работает для всех основных / верхних навигационных ссылок для вашего сайта (строка для соответствия href является последним сегментом пути URL):

<script type="text/javascript">
$(document).ready(function(){
    page = window.location.pathname.substring(1).replace(/\//g,'');
    $("a[href*='" + page + "']").addClass('current-selected');
});
</script>

Answer 3

Если ваш идентификатор тела не всегда будет идеально совпадать с именем файла соответствующей ссылки, вы можете сделать это следующим образом.

$("body#index a[href='index.php']").addClass("current-selected");
$("body#service a[href='service.php']").addClass("current-selected");

Если ваш идентификатор тела всегда будет соответствовать значению href соответствующей ссылки, вы можете сначала извлечь идентификатор тела и использовать его в качестве переменной в селекторе jQuery:

var body_id = $("body").attr("id");
$("a[href='"+body_id+".php']").addClass("current-selected");

Answer 4

$('body#index a[href="index.php"]').addClass("current-selected");
$('body#services a[href="services.php"]').addClass("current-selected");