Изменение CSS для ссылки на текущую страницу с jQuery

Новый кодер здесь и был бы очень признателен за вашу помощь с проблемой, которая заставила меня остановиться.Изменение CSS для ссылки на текущую страницу с jQuery

Я хотел бы написать код, который будет распознавать ссылку, относящуюся к текущей странице, и применяет другой стиль CSS к этой текущей ссылке. Я исследовал эту проблему и обнаружил, что лучше всего использовать jQuery для идентификации текущей ссылки, а затем применить к ней новый класс (например, «.current»). Однако, когда я попытался реализовать это на сайте, он не сработал.

Это HTML я работаю с:

<nav class="main-nav"> 
    <a href="http://website.com" class="main-nav-link"> 
     <span class="main-nav-item" id="nav-content"></span> 
    </a> 
    <a href="http://website.com/calendar" class="main-nav-link"> 
     <span class="main-nav-item" id="nav-calendar"></span> 
    </a> 
    <a href="http://website.com/profile" class="main-nav-link"> 
     <span class="main-nav-item" id="nav-profile"></span> 
    </a> 
</nav>

И это CSS я применил:

.main-nav .main-nav-item { 
    height: 50px; 
    width: 150px; 
} 

.main-nav #nav-content { 
    background: url('/images/content-inactive.png') no-repeat center; 
} 

.main-nav #nav-calendar { 
    background: url('/images/calendar-inactive.png') no-repeat center; 
} 

.main-nav #nav-profile { 
    background: url('/images/profile-inactive.png') no-repeat center; 
}

Моя цель состоит в том, чтобы изменить background: для пролета в пределах текущая страница <a>.

Вот некоторые другие StackOverflow темы, которые решили эту проблему, но не помогли мне достичь решения:

Это не совсем ясно для меня где я должен помещать Javascript, но в настоящее время у меня это между <script type="text/javascript"> и </script> в разделе <header>.

Заранее благодарю вас за помощь. :)

UPDATE:

настоящее время у меня следующий код на странице, но это не работает.

Javascript:

<script> 

     $(document).ready(function() { 

    // Get the current URL 
      var currentUrl = window.location.href; 

      // Get the span you want with a combination class and attribute and child jQuery selector 
      var currentMenuItem = $(".main-nav-link[href='" + currentUrl + "'] > .main-nav-item"); 

      // Then add your class 
      currentMenuItem.addClass("current"); 

     }); 

</script>

И CSS:

#nav-content.current { 
    background: url('/images/content-active.png') no-repeat center -94px; 
}

Jquery не добавляя .current класса к активной ссылке, поэтому CSS даже не имеет возможности Работа.

источник

2013-04-16 Max

FYI, нет необходимости использовать 'type =' в тегах скрипта] (http://www.youtube.com/watch?feature=player_detailpage&v=Y2Y0U-2qJMs#t=936s), на самом деле ' text/javascript' не является типом MIME для JS. –

Получил это. Спасибо за этот совет. – Max

window.location.href получите ваш текущий URL. Затем вам нужно использовать селектор jQuery, который находит дочерний элемент <span class="main-nav-item"> элемента <a class="main-nav-link"> с этим атрибутом href. Примените свой класс «current» к этому элементу, и вам должно быть хорошо идти. Итак, как насчет этого JavaScript:

// Get the current URL 
var currentUrl = window.location.href; 

// Get the span you want with a combination class and attribute and child jQuery selector 
var currentMenuItem = $(".main-nav-link[href='" + currentUrl + "'] > .main-nav-item"); 

// Then add your class 
currentMenuItem.addClass("current");

Положите это в свои теги скрипта и попробуйте.

Как только вы его заработаете, убедитесь, что вы добавили правильные правила CSS. Например, добавьте правило, которое загружает другое фоновое изображение для #nav-content.current (и другое - все остальное).

(Заметка о текущем CSS: похоже, что вы переопределяете свои селекторы. Если вам не нужно беспокоиться о .main-nav-item в любом месте на странице, не утруждайте себя квалификацией этого класса с .main-nav до Это означает, что ваши селекторы id (например, #nav-content) не обязательно должны быть квалифицированы, поскольку они являются уникальными идентификаторами.)

Надеюсь, что имеет смысл для вас и помогает.

источник

2013-04-16 02:33:15 davidtheclark

Спасибо, Дейв. Это имеет смысл, и я следовал за ним, но он не применяет класс 'current' к диапазону в активной ссылке. Я не уверен, почему это ... – Max

Я копирую и вставляю ваш точный код между тегами '

Внутри вашей страницы тегов сценария можно использовать следующее:

$(document).ready(function() { 
    var currentPage = "content"; // <--Change this to the id of your span after the nav- 

    //Change the background color now 
    $("#nav-" + currentPage).addClass("className"); 
});

источник

2013-04-16 02:19:13 tymeJV

Почему бы просто не сделать это в CSS? – ahren

OP сказал, что он смотрит в jQuery, это то, что я предоставил. – tymeJV

Спасибо за ваш ответ, tymeJV. Тем не менее, я просто хочу добавить класс в диапазон в активной ссылке (вместо того, чтобы применять новый фон напрямую с помощью jQuery). Причина этого в том, что существуют разные фоны для разных ссылок, в зависимости от того, какой из них активен , – Max

Обычный способ сделать это, чтобы добавить класс как «активный» к вашей активной стороне сервера страниц связи. Вы можете затем стиль элемента с JQuery, как так:

$('.active').css('background-image','images/activebg.png');

Но, как уже упоминалось, вам потребуется другой фон для каждого «активного» элемента, и вы хотите использовать ссылку. (Я полагаю, вы имеете в виду URL-адрес).

Вы можете получить URL текущей страницы, как это:

var current_url = window.location.href;

Вы можете выбрать ссылку с текущим URL вроде этого:

var $link = $('.main-nav a[href='+current_url +']');

Итак, теперь вы можете установить фон активный для ссылка на текущую страницу:

$link.css('background-image','images/activebg.png');

Теперь, если у вас есть пользовательский активный фон для e ACH ссылку, я хотел бы предложить вам создать свой собственный атрибут hover_img или что-то, в котором вы предоставить парения URL:

<a href="http://website.com" class="main-nav-link" hover_img="/images/hover-home.png" > .... 
<a href="http://website.com/calendar" class="main-nav-link calendar" hover_img="/images/hover-calendar.png"> ....

и так далее.

Затем, вы можете изменить свою последнюю строку кода:

$link.css('background-image',$link.attr('hover_img'));

источник

2013-04-16 02:22:56

Спасибо, что ответили, но я немного смущен вашим ответом. Я получаю первую часть об определении переменной «current_url» в качестве активной страницы, и я думаю, что я понимаю вторую часть об определении переменной «$ link» в качестве ссылки, указывающей на «current_url» (хотя я не уверен, почему вы использовал знак доллара). Однако после этого вы потеряли меня, когда предложили создать свой собственный атрибут. Не проще ли было бы использовать функцию '.addClass', чтобы дать отдельный класс активному' ' или '' в активном' '? – Max

Я просто добавляю переменные $ в переменную всякий раз, когда переменная является объектом jQuery. Вам не нужно это делать. Но это делает вещи более ясными, если вы часто работаете с jQuery.Кроме того, вы действительно можете активировать класс с помощью addClass. Мои последние два блока кода полезны, если вам нужно другое фоновое изображение для каждой активной ссылки. Если вам это не нужно, вы можете просто перейти на $ link.addClass ('. Active') 'и определить соответствующий фон в CSS. –

Смежные вопросы