Как сделать ссылку меню активной, используя javascript / jQuery? - PullRequest
Новая
       1

Как сделать ссылку меню активной, используя javascript / jQuery?

1 голос
/ 09 июня 2011

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

ниже приведен HTML-код меню, которое я использую 

<ul id="in-menu">
    <li><a href="unleashing-your-heart" >home</a></li>
    <li><a href="fromdaniella" >from Daniella</a></li>
    <li><a href="material-list" >material list</a></li>
    <li><a href="program" >program</a></li>
    <li><a href="testimonials-2" >testimonials</a></li>
    <li><a href="#">login</a></li>
</ul>

Как использовать jQuery или javascript для работы желаемой функциональности?

Ответы [ 2 ]

4 голосов
/ 09 июня 2011

Для этого вам не нужен javascript / jQuery

Что вы можете сделать, это присвоить каждой из ваших страниц уникальный идентификатор или класс для элемента <body> или основного контейнера div где-нибудь в верхней части структуры HTML в любом случае ... а затем дать каждую из ссылок в В вашем меню также есть уникальный идентификатор или класс (при использовании классов они могут совпадать с первыми)

, например 

<body class="nm-unl">
   <ul id="in-menu">
     <li class="nm-unl"><a href="unleashing-your-heart" >home</a></li>
     <li class="nm-dan"><a href="fromdaniella" >from Daniella</a></li>
     <li class="nm-mat"><a href="material-list" >material list</a></li>
     <li class="nm-pro"><a href="program" >program</a></li>
     <li class="nm-tes"><a href="testimonials-2" >testimonials</a></li>
     <li class="nm-log"><a href="#">login</a></li>
   </ul>
</body>

Таким образом, на вашей домашней странице класс body может быть nm-unl, а ваша страница входа будет иметь body class nm-log и т. Д., Само меню никогда не меняется, поэтому оно все еще может находиться в общем файле

Тогда в CSS каждая ссылка может быть специально нацелена ... так, например, у вашей простой ссылки нет изображения, но :hover и ваши "текущие" страницы имеют 

#in-menu a {background: none;}

#in-menu a:hover {background: url(image.png) no-repeat top center;}

Затем вы сгруппируете новые / конкретные селекторы в селекторы правил наведения, тогда эти правила более специфичны, чем обычное правило #in-menu a {}, а также они будут когда-либо применяться только к вашей "ссылке на текущую страницу", т.е. когда два классы на странице одинаковы 

.nm-log #in-menu .nm-log a,
.nm-tes #in-menu .nm-tes a,
.nm-pro #in-menu .nm-pro a,
.nm-mat #in-menu .nm-mat a,
.nm-dan #in-menu .nm-dan a,
.nm-unl #in-menu .nm-unl a,
#in-menu a:hover {background: url(image.png) no-repeat top center;}

Вам все еще нужен идентификатор #in-menu в селекторе, а также в двух классах, потому что в противном случае селектор не будет иметь достаточного веса для переопределения правила по умолчанию

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

0 голосов
/ 17 января 2013

Вот решение на основе jquery:

1) идентифицируйте каждую страницу как

2) сопоставить этот идентификатор с вашими пунктами меню

3) соответственно изменить CSS 

<script>
    pageID = $('#pageID').val();
    $( "li" ).each(function( index ) {
        listItemText = $(this).html();
        listItemText = listItemText.toLowerCase();

        if(listItemText == pageID)
            {
                $(this).css('color','red');
            }
    });
</script>

<style>
    li{
        color:green;
    }
</style>

<input type="hidden" id="pageID" value="contact" />

<ul>
    <li>Home</li>
    <li>About</li>
    <li>Portfolio</li>
    <li>Contact</li>
</ul>

http://jsfiddle.net/CnEsF/

Есть много способов сделать каждый из этих шагов, отсюда и стиль моего ответа. Каждый шаг может быть выполнен по-разному. Идентификация страницы может включать использование скрытого ввода или какого-либо другого элемента DOM или анализ URL. Сопоставление потребует от вас стандартизации вашего сценария, чтобы ваш условный код не вышел из строя ... Я использовал строчный метод, но есть и другие способы. Наконец, изменение CSS может быть сделано путем назначения нового класса, который уже имеет стили, изменения DOM с помощью jquery или даже назначения правильного класса при создании страницы с помощью PHP.

Надеюсь, это поможет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...